{"id":10081,"date":"2025-12-20T07:47:19","date_gmt":"2025-12-20T07:47:19","guid":{"rendered":"https:\/\/bscwebdesign.at\/blog\/what-is-a-header-simply-explained-for-websites\/"},"modified":"2025-12-20T09:03:01","modified_gmt":"2025-12-20T09:03:01","slug":"what-is-a-header-simply-explained-for-websites","status":"publish","type":"post","link":"https:\/\/bscwebdesign.at\/en\/blog\/what-is-a-header-simply-explained-for-websites\/","title":{"rendered":"What is a header? (Simply explained for websites)"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"10081\" class=\"elementor elementor-10081 elementor-10034\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-74692f0c e-flex e-con-boxed e-con e-parent\" data-id=\"74692f0c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7573e9f7 elementor-widget elementor-widget-text-editor\" data-id=\"7573e9f7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t\n<h2 class=\"wp-block-heading\"\/>\n\n\n\n<p\/>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-20508c0 e-flex e-con-boxed e-con e-parent\" data-id=\"20508c0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-e80b7a4 e-con-full e-flex e-con e-child\" data-id=\"e80b7a4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-535d2d3 elementor-widget__width-initial elementor-widget elementor-widget-heading\" data-id=\"535d2d3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">What is a header? (Simply explained for websites) <\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-112a075 e-con-full elementor-hidden-mobile e-flex e-con e-child\" data-id=\"112a075\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-45f66e0 elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"45f66e0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-300x300.webp\" class=\"attachment-medium size-medium wp-image-3952\" alt=\"Portr\u00e4t von Tobias Berger, junger Mann mit lockigen Haaren und blauem BSC-Pulli, l\u00e4chelnd in die Kamera blickend.\" srcset=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-300x300.webp 300w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-1024x1024.webp 1024w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-150x150.webp 150w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-768x768.webp 768w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-1536x1536.webp 1536w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-2048x2048.webp 2048w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d0d3af0 elementor-hidden-mobile elementor-widget elementor-widget-text-editor\" data-id=\"d0d3af0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p style=\"font-family: 'Sora variabel', sans-serif; color: #000;\"><span style=\"color: #000;\">by<\/span> Tobias Berger \/ <span style=\"color: #000;\">updated<\/span> 21.20.2025 \/ 3 min. Reading time<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-37979f4 e-con-full elementor-hidden-desktop elementor-hidden-tablet e-flex e-con e-child\" data-id=\"37979f4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d1a9b06 elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"d1a9b06\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-300x300.webp\" class=\"attachment-medium size-medium wp-image-3952\" alt=\"Portr\u00e4t von Tobias Berger, junger Mann mit lockigen Haaren und blauem BSC-Pulli, l\u00e4chelnd in die Kamera blickend.\" srcset=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-300x300.webp 300w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-1024x1024.webp 1024w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-150x150.webp 150w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-768x768.webp 768w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-1536x1536.webp 1536w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-2048x2048.webp 2048w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2b9c4d9 elementor-hidden-desktop elementor-hidden-tablet elementor-widget elementor-widget-text-editor\" data-id=\"2b9c4d9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p style=\"font-family: 'Sora variabel', sans-serif; color: #000;\"><span style=\"color: #000;\">by<\/span> Tobias Berger \/ <span style=\"color: #000;\">updated<\/span> 20.12.2025 \/ <br>3 min. Reading time<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e16fdb9 e-flex e-con-boxed e-con e-parent\" data-id=\"e16fdb9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-f5459f2 e-con-full e-flex e-con e-child\" data-id=\"f5459f2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3ba2ca5 elementor-widget elementor-widget-text-editor\" data-id=\"3ba2ca5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<section id=\"sec-intro\" class=\"bsc-domain\">\n<div class=\"wrap\">\n\nA header is the upper area of a website. It usually contains the logo, the menu and an important button. The header helps visitors to immediately understand where they are and how they can navigate the website.  \n\n<div class=\"tip-box\"><strong>Definition in one sentence:<\/strong>\nA website header is the upper area of a website with logo and navigation that gives visitors orientation &#8211; for example on sites like <em>bscwebdesign.at<\/em>.<\/div>\n\n<\/div>\n<\/section>\n\n<section id=\"sec-main\" class=\"bsc-domain\">\n<div class=\"wrap\">\n\n<div class=\"cms-hero-img header-toggle\" data-before=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/12\/Foto_Header_Website_BSC_Webdesign-scaled.webp\" data-after=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/12\/Foto_Header_Website_Design.webp\">\n\n  <div class=\"header-toggle-top\">\n    <span class=\"header-question\">Question: Where is the header?<\/span>\n    <button class=\"bsc-toggle\" type=\"button\" aria-pressed=\"false\">\n  Show header\n    <\/button>\n  <\/div>\n\n  <img decoding=\"async\" src=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/12\/Foto_Header_Website_BSC_Webdesign-scaled.webp\" alt=\"Example of a website: Where is the header?\">\n\n  <p class=\"img-caption\">\n  Example website without marked header\n  <\/p>\n<\/div>\n\n<h2>What belongs in a header? (typical structure) <\/h2>\nA good website header is clear and easy to understand. Especially for beginners: clear is better than complicated. \n\n<ul class=\"bullet\">\n  <li><strong>Logo<\/strong> &#8211; usually placed on the left and linked to the homepage<\/li>\n  <li><strong>Navigation \/ menu<\/strong> &#8211; e.g. home page, services, contact<\/li>\n  <li><strong>Call-to-action<\/strong> &#8211; often a button like &#8220;Contact&#8221;<\/li>\n  <li><strong>Optional:<\/strong> Telephone number or short note<\/li>\n<\/ul>\n\n<h2>Why is the header so important?<\/h2>\nThe header is one of the most important areas in web design. Visitors often decide in just a few seconds whether they stay &#8211; a clearly structured header helps enormously. \n\n<ul class=\"bullet\">\n  <li><strong>Orientation:<\/strong> content can be found more quickly<\/li>\n  <li><strong>Trust:<\/strong> The website looks professional<\/li>\n  <li><strong>Usability:<\/strong> Good navigation reduces frustration<\/li>\n  <li><strong>Conversion:<\/strong> A clear button increases clicks<\/li>\n<\/ul>\n\n<div class=\"tip-box\"><strong>Tip:<\/strong>\nIf you want to set up your website yourself step by step, our guide will help you:\n<a href=\"https:\/\/bscwebdesign.at\/en\/blog\/create-website-2025-step-by-step-guide-pdf-generator\/\" target=\"_blank\" rel=\"noopener\">\nCreate website 2025 &#8211; step-by-step guide\n<\/a>.\n<\/div>\n\n<h2>Website header structure: What makes sense?<\/h2>\nA sensible header is not overloaded. For a good structure we recommend: \n\n<ul class=\"bullet\">\n  <li>Maximum <strong>5-7 menu items<\/strong><\/li>\n  <li>Clear terms instead of creative fantasy names<\/li>\n  <li>A clearly visible contact button<\/li>\n  <li>Always consider mobile display<\/li>\n<\/ul>\n\n<h2>Difference header vs. footer<\/h2>\nHeader and footer have different tasks:\n\n<ul class=\"bullet\">\n  <li><strong>Header:<\/strong> Top &#8211; Navigation &amp; orientation<\/li>\n  <li><strong>Footer:<\/strong> Below &#8211; Additional information &amp; mandatory links<\/li>\n<\/ul>\n\n<div class=\"tip-box\"><strong>Read more:<\/strong>\nYou can find out exactly what belongs in the footer here:\n<a href=\"https:\/\/bscwebdesign.at\/en\/blog\/what-is-a-footer-meaning-function-on-websites\/\" target=\"_blank\" rel=\"noopener\">\nWhat is a footer? Simply explained \n<\/a>\n<\/div>\n\n<\/div>\n<\/section>\n\n<section id=\"sec-fazit\" class=\"bsc-domain\">\n<div class=\"wrap\">\n\n<h2>Conclusion: The header determines orientation<\/h2>\nA website header is more than just a menu. It determines whether visitors find their way around, build trust and continue clicking. A clear, well-structured header is therefore one of the most important foundations of any website.  \n\n<div class=\"tip-box\"><strong>Next step:<\/strong>\nIn the big guide\n<a href=\"https:\/\/bscwebdesign.at\/en\/blog\/create-website-2025-step-by-step-guide-pdf-generator\/\" target=\"_blank\" rel=\"noopener\">\nCreate website 2025 &#8211; step-by-step guide\n<\/a>\n you can see how header, footer and content together create a functioning website.\n<\/div>\n\n<\/div>\n<\/section>\n\n<section id=\"sec-faq\" class=\"bsc-domain\">\n<div class=\"wrap\">\n\n<h2>FAQ &#8211; short &amp; simple<\/h2>\n\n<details class=\"faq\"><summary>What is a header on a website?<\/summary>\nA header is the top section of a website. It usually contains the logo, menu and an important button and helps visitors to find their way around. \n<\/details>\n\n<details class=\"faq\"><summary>Is the header the same on every page?<\/summary>\nYes, in most cases the header is the same on all pages so that users always have the same navigation.\n<\/details>\n\n<details class=\"faq\"><summary>What is a sticky header?<\/summary>\nA sticky header remains visible when scrolling. This is practical for navigation, but should not take up too much space. \n<\/details>\n\n<details class=\"faq\"><summary>What is the difference between header and footer?<\/summary>\nThe header is at the top and is used for navigation. The footer is at the bottom and contains additional information such as contact or legal links. \n<\/details>\n\n<details class=\"faq\"><summary>Do I absolutely need a header?<\/summary>\nYes, without a header, visitors lack orientation. A clear header is essential, especially for websites for beginners.  \n<\/details>\n\n<\/div>\n<\/section>\n\n<style>\n  .bsc-domain{font-family:\"Sora\",system-ui,-apple-system,\"Segoe UI\",Roboto,Arial,sans-serif;font-size:16px;line-height:1.8;color:#0c0c0d}\n  .bsc-domain .wrap{max-width:800px;margin:0 auto;padding:0 12px}\n  .bsc-domain h2{font-size:24px;font-weight:800;line-height:1.3;margin:2rem 0 .8rem}\n  .bsc-domain p{margin:.5rem 0 1rem}\n  .bsc-domain ul.bullet{list-style:none;padding:0;margin:.5rem 0 1.2rem}\n  .bsc-domain ul.bullet li{position:relative;padding-left:22px;margin:.32rem 0}\n  .bsc-domain ul.bullet li::before{content:\"\";position:absolute;left:0;top:.6em;width:.6rem;height:.6rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}\n  .bsc-domain a{color:#151DA5;text-decoration:underline}\n  .bsc-domain a:hover{text-decoration:none}\n  .tip-box{background:#F7F8FF;border-left:4px solid #151DA5;border-radius:14px;padding:16px 20px;font-size:.97rem;box-shadow:0 3px 10px rgba(12,12,13,.06);margin:22px 0 32px}\n  .faq{background:#fff;border:1px solid #eceef3;border-radius:12px;padding:12px 14px;margin:10px 0;box-shadow:0 2px 8px rgba(12,12,13,.04)}\n  .faq>summary{cursor:pointer;font-weight:700;list-style:none;position:relative;padding-right:28px}\n  .faq>summary::-webkit-details-marker{display:none}\n  .faq>summary::after{content:\"\";position:absolute;right:4px;top:50%;transform:translateY(-50%) rotate(0);width:10px;height:10px;border-right:2px solid #151DA5;border-bottom:2px solid #151DA5;transition:transform .18s ease}\n  .faq[open]>summary::after{transform:translateY(-50%) rotate(45deg)}\n  @media(max-width:640px){.bsc-domain h2{font-size:22px}}\n\n  .cms-hero-img{margin:28px 0 26px;text-align:center}\n  .cms-hero-img img{width:100%;max-width:760px;border-radius:16px;box-shadow:0 4px 18px rgba(0,0,0,0.08);display:block;margin:0 auto}\n  .cms-hero-img .img-caption{font-size:.82rem;color:#555;margin-top:6px}\n\n  .header-toggle-top{\n    display:flex;\n    justify-content:center;\n    align-items:center;\n    gap:14px;\n    margin:0 auto 12px;\n    text-align:center;\n  }\n  .header-question{\n    font-size:1.05rem;\n    font-weight:800;\n    color:#0c0c0d;\n    letter-spacing:-0.01em;\n  }\n\n  .header-toggle .bsc-toggle{\n    border:1px solid #0c0c0d;\n    background:#fff;\n    color:#0c0c0d;\n    padding:9px 16px;\n    border-radius:999px;\n    font-family:\"Sora\",system-ui,-apple-system,\"Segoe UI\",Roboto,Arial,sans-serif;\n    font-size:.86rem;\n    font-weight:700;\n    cursor:pointer;\n    transition:background .15s ease,color .15s ease,transform .12s ease, box-shadow .15s ease;\n    box-shadow:0 6px 16px rgba(12,12,13,.10);\n  }\n  .header-toggle .bsc-toggle:hover{background:#0c0c0d;color:#fff}\n  .header-toggle .bsc-toggle:active{transform:scale(.97)}\n<\/style>\n\n<script>\n(function(){\n  const blocks = document.querySelectorAll('.header-toggle');\n  blocks.forEach(block => {\n    const img = block.querySelector('img');\n    const cap = block.querySelector('.img-caption');\n    const btn = block.querySelector('.bsc-toggle');\n    const before = block.getAttribute('data-before');\n    const after  = block.getAttribute('data-after');\n    let on = false;\n\n    btn.addEventListener('click', () => {\n      on = !on;\n      img.src = on ? after : before;\n      btn.textContent = on ? 'Header ausblenden' : 'Header anzeigen';\n      if(cap){\n        cap.textContent = on\n          ? 'Header markiert: Oberer Bereich mit Logo und Navigation'\n          : 'Beispiel-Website ohne markierten Header';\n      }\n      btn.setAttribute('aria-pressed', on ? 'true' : 'false');\n    });\n  });\n})();\n<\/script>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-33a5228 e-flex e-con-boxed e-con e-parent\" data-id=\"33a5228\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5286852 elementor-fixed elementor-widget__width-initial elementor-widget elementor-widget-table-of-contents\" data-id=\"5286852\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;headings_by_tags&quot;:[&quot;h2&quot;],&quot;exclude_headings_by_selector&quot;:[],&quot;no_headings_message&quot;:&quot;Es wurden keine \\u00dcberschriften auf dieser Seite gefunden.&quot;,&quot;_position&quot;:&quot;fixed&quot;,&quot;marker_view&quot;:&quot;bullets&quot;,&quot;icon&quot;:{&quot;value&quot;:&quot;&quot;,&quot;library&quot;:&quot;&quot;},&quot;hierarchical_view&quot;:&quot;yes&quot;,&quot;min_height&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;min_height_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;min_height_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"table-of-contents.default\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-toc__header\">\n\t\t\t\t\t\t<h4 class=\"elementor-toc__header-title\">\n\t\t\t\tIn this article\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div id=\"elementor-toc__5286852\" class=\"elementor-toc__body\">\n\t\t\t<div class=\"elementor-toc__spinner-container\">\n\t\t\t\t<svg class=\"elementor-toc__spinner eicon-animation-spin e-font-icon-svg e-eicon-loading\" aria-hidden=\"true\" viewBox=\"0 0 1000 1000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M500 975V858C696 858 858 696 858 500S696 142 500 142 142 304 142 500H25C25 237 238 25 500 25S975 237 975 500 763 975 500 975Z\"><\/path><\/svg>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-de42209 e-con-full e-flex e-con e-child\" data-id=\"de42209\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-7263eed e-con-full e-flex e-con e-child\" data-id=\"7263eed\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1bc6db6 elementor-widget elementor-widget-image\" data-id=\"1bc6db6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-1024x1024.webp\" class=\"attachment-large size-large wp-image-3952\" alt=\"Portr\u00e4t von Tobias Berger, junger Mann mit lockigen Haaren und blauem BSC-Pulli, l\u00e4chelnd in die Kamera blickend.\" srcset=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-1024x1024.webp 1024w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-300x300.webp 300w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-150x150.webp 150w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-768x768.webp 768w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-1536x1536.webp 1536w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-2048x2048.webp 2048w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8a8a35c e-con-full e-flex e-con e-child\" data-id=\"8a8a35c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b18b9c4 elementor-widget elementor-widget-heading\" data-id=\"b18b9c4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Hey, I'm Tobias!<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e6d383b elementor-widget elementor-widget-text-editor\" data-id=\"e6d383b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<p id=\"viewer-e9b6k624\" class=\"pQuHl TfvTg z3yvg logrL\" dir=\"auto\">Thanks for taking the time to read this post &#8211; really cool that you&#8217;re interested in website &amp; web design!&nbsp;<br data-start=\"486\" data-end=\"489\">You can find many more tips on design, technology and SEO on our blog. And if you have any questions or need support with your own website, we at BSC Webdesign are always happy to help. <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-55a8520 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"55a8520\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/bscwebdesign.at\/en\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">See for yourself now<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b853161 elementor-widget elementor-widget-image\" data-id=\"b853161\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/11\/Beispiel_Fuer_Onepager.mp4\" title=\"\" alt=\"\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>What is a header on a website? Simple explanation for beginners: Meaning, structure, examples &amp; typical mistakes in web design. <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-10081","post","type-post","status-publish","format-standard","hentry","category-nicht-kategorisiert"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>What is a header? (Simply explained for websites) - bscwebdesign.at<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/bscwebdesign.at\/en\/blog\/what-is-a-header-simply-explained-for-websites\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is a header? (Simply explained for websites) - bscwebdesign.at\" \/>\n<meta property=\"og:description\" content=\"What is a header on a website? Simple explanation for beginners: Meaning, structure, examples &amp; typical mistakes in web design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bscwebdesign.at\/en\/blog\/what-is-a-header-simply-explained-for-websites\/\" \/>\n<meta property=\"og:site_name\" content=\"bscwebdesign.at\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-20T07:47:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-20T09:03:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-scaled.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"2560\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"office@bscwebdesign.com\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"office@bscwebdesign.com\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/what-is-a-header-simply-explained-for-websites\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/what-is-a-header-simply-explained-for-websites\\\/\"},\"author\":{\"name\":\"office@bscwebdesign.com\",\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#\\\/schema\\\/person\\\/f791b2d19aa0477a1a182c09cca40514\"},\"headline\":\"What is a header? (Simply explained for websites)\",\"datePublished\":\"2025-12-20T07:47:19+00:00\",\"dateModified\":\"2025-12-20T09:03:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/what-is-a-header-simply-explained-for-websites\\\/\"},\"wordCount\":616,\"publisher\":{\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/what-is-a-header-simply-explained-for-websites\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/bscwebdesign.at\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/Tobias-300x300.webp\",\"articleSection\":[\"Nicht kategorisiert\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/what-is-a-header-simply-explained-for-websites\\\/\",\"url\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/what-is-a-header-simply-explained-for-websites\\\/\",\"name\":\"What is a header? (Simply explained for websites) - bscwebdesign.at\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/what-is-a-header-simply-explained-for-websites\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/what-is-a-header-simply-explained-for-websites\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/bscwebdesign.at\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/Tobias-300x300.webp\",\"datePublished\":\"2025-12-20T07:47:19+00:00\",\"dateModified\":\"2025-12-20T09:03:01+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/what-is-a-header-simply-explained-for-websites\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/what-is-a-header-simply-explained-for-websites\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/what-is-a-header-simply-explained-for-websites\\\/#primaryimage\",\"url\":\"https:\\\/\\\/bscwebdesign.at\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/Tobias-300x300.webp\",\"contentUrl\":\"https:\\\/\\\/bscwebdesign.at\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/Tobias-300x300.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/what-is-a-header-simply-explained-for-websites\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/home\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What is a header? (Simply explained for websites)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#website\",\"url\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/\",\"name\":\"bscwebdesign.at\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#organization\",\"name\":\"bscwebdesign.at\",\"url\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/bscwebdesign.at\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/bsc-logo-next.webp\",\"contentUrl\":\"https:\\\/\\\/bscwebdesign.at\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/bsc-logo-next.webp\",\"width\":2500,\"height\":1000,\"caption\":\"bscwebdesign.at\"},\"image\":{\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#\\\/schema\\\/person\\\/f791b2d19aa0477a1a182c09cca40514\",\"name\":\"office@bscwebdesign.com\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2e20e08ef43e4350ac5d6c2778485f497dbb48e503340112c1f1fb68f4c44d89?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2e20e08ef43e4350ac5d6c2778485f497dbb48e503340112c1f1fb68f4c44d89?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2e20e08ef43e4350ac5d6c2778485f497dbb48e503340112c1f1fb68f4c44d89?s=96&d=mm&r=g\",\"caption\":\"office@bscwebdesign.com\"},\"sameAs\":[\"https:\\\/\\\/bscwebdesign.at\"],\"url\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/author\\\/officebscwebdesign-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is a header? (Simply explained for websites) - bscwebdesign.at","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/bscwebdesign.at\/en\/blog\/what-is-a-header-simply-explained-for-websites\/","og_locale":"en_US","og_type":"article","og_title":"What is a header? (Simply explained for websites) - bscwebdesign.at","og_description":"What is a header on a website? Simple explanation for beginners: Meaning, structure, examples &amp; typical mistakes in web design.","og_url":"https:\/\/bscwebdesign.at\/en\/blog\/what-is-a-header-simply-explained-for-websites\/","og_site_name":"bscwebdesign.at","article_published_time":"2025-12-20T07:47:19+00:00","article_modified_time":"2025-12-20T09:03:01+00:00","og_image":[{"width":2560,"height":2560,"url":"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-scaled.webp","type":"image\/webp"}],"author":"office@bscwebdesign.com","twitter_card":"summary_large_image","twitter_misc":{"Written by":"office@bscwebdesign.com","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/bscwebdesign.at\/en\/blog\/what-is-a-header-simply-explained-for-websites\/#article","isPartOf":{"@id":"https:\/\/bscwebdesign.at\/en\/blog\/what-is-a-header-simply-explained-for-websites\/"},"author":{"name":"office@bscwebdesign.com","@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#\/schema\/person\/f791b2d19aa0477a1a182c09cca40514"},"headline":"What is a header? (Simply explained for websites)","datePublished":"2025-12-20T07:47:19+00:00","dateModified":"2025-12-20T09:03:01+00:00","mainEntityOfPage":{"@id":"https:\/\/bscwebdesign.at\/en\/blog\/what-is-a-header-simply-explained-for-websites\/"},"wordCount":616,"publisher":{"@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#organization"},"image":{"@id":"https:\/\/bscwebdesign.at\/en\/blog\/what-is-a-header-simply-explained-for-websites\/#primaryimage"},"thumbnailUrl":"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-300x300.webp","articleSection":["Nicht kategorisiert"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/bscwebdesign.at\/en\/blog\/what-is-a-header-simply-explained-for-websites\/","url":"https:\/\/bscwebdesign.at\/en\/blog\/what-is-a-header-simply-explained-for-websites\/","name":"What is a header? (Simply explained for websites) - bscwebdesign.at","isPartOf":{"@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/bscwebdesign.at\/en\/blog\/what-is-a-header-simply-explained-for-websites\/#primaryimage"},"image":{"@id":"https:\/\/bscwebdesign.at\/en\/blog\/what-is-a-header-simply-explained-for-websites\/#primaryimage"},"thumbnailUrl":"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-300x300.webp","datePublished":"2025-12-20T07:47:19+00:00","dateModified":"2025-12-20T09:03:01+00:00","breadcrumb":{"@id":"https:\/\/bscwebdesign.at\/en\/blog\/what-is-a-header-simply-explained-for-websites\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bscwebdesign.at\/en\/blog\/what-is-a-header-simply-explained-for-websites\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bscwebdesign.at\/en\/blog\/what-is-a-header-simply-explained-for-websites\/#primaryimage","url":"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-300x300.webp","contentUrl":"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-300x300.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/bscwebdesign.at\/en\/blog\/what-is-a-header-simply-explained-for-websites\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/bscwebdesign.at\/en\/home\/"},{"@type":"ListItem","position":2,"name":"What is a header? (Simply explained for websites)"}]},{"@type":"WebSite","@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#website","url":"https:\/\/plum-ibex-319890.hostingersite.com\/","name":"bscwebdesign.at","description":"","publisher":{"@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/plum-ibex-319890.hostingersite.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#organization","name":"bscwebdesign.at","url":"https:\/\/plum-ibex-319890.hostingersite.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#\/schema\/logo\/image\/","url":"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/07\/bsc-logo-next.webp","contentUrl":"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/07\/bsc-logo-next.webp","width":2500,"height":1000,"caption":"bscwebdesign.at"},"image":{"@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#\/schema\/person\/f791b2d19aa0477a1a182c09cca40514","name":"office@bscwebdesign.com","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/2e20e08ef43e4350ac5d6c2778485f497dbb48e503340112c1f1fb68f4c44d89?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2e20e08ef43e4350ac5d6c2778485f497dbb48e503340112c1f1fb68f4c44d89?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2e20e08ef43e4350ac5d6c2778485f497dbb48e503340112c1f1fb68f4c44d89?s=96&d=mm&r=g","caption":"office@bscwebdesign.com"},"sameAs":["https:\/\/bscwebdesign.at"],"url":"https:\/\/bscwebdesign.at\/en\/blog\/author\/officebscwebdesign-com\/"}]}},"_links":{"self":[{"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/posts\/10081","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/comments?post=10081"}],"version-history":[{"count":1,"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/posts\/10081\/revisions"}],"predecessor-version":[{"id":10082,"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/posts\/10081\/revisions\/10082"}],"wp:attachment":[{"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/media?parent=10081"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/categories?post=10081"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/tags?post=10081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}