Skip to main content
  1. SEO glossary/

Header Tags

5 mins

What is it? #

Header tags are HTML elements used to define and organize the structure of a web page. They are placed within the element of an HTML document and provide information about the page, such as its title, character encoding, stylesheets, and scripts. Header tags are essential for creating a well-structured and organized website, as they help search engines and web browsers understand the content and layout of the page. Some common header tags include , <meta charset>, <link rel="stylesheet">, and <script src="">.</p> <h2 id="here-are-some-examples" class="relative group">Here are some examples: <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#here-are-some-examples" aria-label="Anchor">#</a></span></h2> <p>Header tags, specifically the <code><header></code> tag, is used to define the header section of a web page. The header usually contains the site logo, navigation menu, and other related elements. Here are some examples of how the <code><header></code> tag is used in different websites:</p> <ol> <li>Google:</li> </ol> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">header</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"logo"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.google.com/"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"Google Logo"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">a</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"search-bar"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">form</span> <span class="na">action</span><span class="o">=</span><span class="s">"https://www.google.com/search"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">name</span><span class="o">=</span><span class="s">"q"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"Search Google"</span> <span class="na">required</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">class</span><span class="o">=</span><span class="s">"search-button"</span><span class="p">></span>Search<span class="p"></</span><span class="nt">button</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">form</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> </span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">header</span><span class="p">></span> </span></span></code></pre></div><ol start="2"> <li>YouTube:</li> </ol> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">header</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"logo"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.youtube.com/"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://www.youtube.com/yt/images/hero/default_hero.png"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"YouTube Logo"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">a</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"navigation"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">ul</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.youtube.com/home"</span><span class="p">></span>Home<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.youtube.com/trending"</span><span class="p">></span>Trending<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.youtube.com/music"</span><span class="p">></span>Music<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.youtube.com/movies"</span><span class="p">></span>Movies<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.youtube.com/tvshows"</span><span class="p">></span>TV Shows<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">ul</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> </span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">header</span><span class="p">></span> </span></span></code></pre></div><ol start="3"> <li>Facebook:</li> </ol> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">header</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"logo"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.facebook.com/"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://www.facebook.com/images/logo.png"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"Facebook Logo"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">a</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"navigation"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">ul</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.facebook.com/home.php"</span><span class="p">></span>Home<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.facebook.com/events"</span><span class="p">></span>Events<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.facebook.com/groups"</span><span class="p">></span>Groups<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.facebook.com/marketplace"</span><span class="p">></span>Marketplace<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.facebook.com/stories"</span><span class="p">></span>Stories<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">ul</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> </span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">header</span><span class="p">></span> </span></span></code></pre></div><ol start="4"> <li>Amazon:</li> </ol> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">header</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"logo"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.amazon.com/"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://images-na.ssl-images-amazon.com/images/G/01/Amazon_logo_2018_1000x1000.png"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"Amazon Logo"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">a</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"navigation"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">ul</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.amazon.com/home"</span><span class="p">></span>Home<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.amazon.com/books"</span><span class="p">></span>Books<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.amazon.com/electronics"</span><span class="p">></span>Electronics<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.amazon.com/fashion"</span><span class="p">></span>Fashion<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.amazon.com/grocery"</span><span class="p">></span>Grocery<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">ul</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> </span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">header</span><span class="p">></span> </span></span></code></pre></div><p>These examples demonstrate how the <code><header></code> tag is used to structure the header section of a web page, containing elements such as the site logo, navigation menu, search bar, and other related components.</p> <h2 id="in-summary" class="relative group">In Summary <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#in-summary" aria-label="Anchor">#</a></span></h2> <p>Header tags are HTML elements used to define the structure and layout of a web page. They include the <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, and <h1>-<h6> tags. These tags help in organizing the content of a web page and improve the overall user experience.</p> </div> </section> <footer class="pt-8 max-w-prose print:hidden"> <div class="flex"> <img class="!mt-0 !mb-0 h-24 w-24 rounded-full ltr:mr-4 rtl:ml-4" width="96" height="96" alt="Chris Haines" src="/img/chris2_hu8453a239c3b4c65cedc6a6a635eaa79b_109751_192x192_fill_box_smart1_3.png" /> <div class="place-self-center"> <div class="text-[0.6rem] uppercase leading-3 text-neutral-500 dark:text-neutral-400"> Author </div> <div class="font-semibold leading-6 text-neutral-800 dark:text-neutral-300"> Chris Haines </div> <div class="text-sm text-neutral-700 dark:text-neutral-400">Chris is an SEO consultant and has been working in SEO for over 10 years. When not involved in SEO Chris enjoys messing around with vintage synthesizers.</div> <div class="text-2xl sm:text-lg"> <div class="flex flex-wrap text-neutral-400 dark:text-neutral-500"> <a class="px-1 transition-transform hover:scale-125 hover:text-primary-700 dark:hover:text-primary-400" href="https://twitter.com/chris_at_b449" target="_blank" aria-label="Twitter" rel="me noopener noreferrer" > <span class="relative inline-block align-text-bottom icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg> </span> </a > <a class="px-1 transition-transform hover:scale-125 hover:text-primary-700 dark:hover:text-primary-400" href="https://uk.linkedin.com/in/london-seo-consultant-chris-haines" target="_blank" aria-label="Linkedin" rel="me noopener noreferrer" > <span class="relative inline-block align-text-bottom icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg> </span> </a > <a class="px-1 transition-transform hover:scale-125 hover:text-primary-700 dark:hover:text-primary-400" href="https://youtube.com/" target="_blank" aria-label="Youtube" rel="me noopener noreferrer" > <span class="relative inline-block align-text-bottom icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg> </span> </a > </div> </div> </div> </div> <div class="pt-8"> <hr class="border-dotted border-neutral-300 dark:border-neutral-600" /> <div class="flex justify-between pt-3"> <span> <a class="group flex" href="/seo-glossary/holistic-seo/"> <span class="mr-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400" >←</span > <span class="ml-2 text-neutral-700 transition-transform group-hover:translate-x-[2px] group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400" >→</span > <span class="flex flex-col"> <span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500" >Holistic Seo</span > <span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400"> </span> </span> </a> </span> <span> <a class="group flex text-right" href="/seo-glossary/h1-tag/"> <span class="flex flex-col"> <span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500" >H1 Tag</span > <span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400"> </span> </span> <span class="ml-2 text-neutral-700 transition-transform group-hover:translate-x-[2px] group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400" >→</span > <span class="mr-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400" >←</span > </a> </span> </div> </div> </footer> </article> <div class="pointer-events-none absolute top-[100vh] bottom-0 w-12 ltr:right-0 rtl:left-0" > <a href="#the-top" class="pointer-events-auto sticky top-[calc(100vh-5.5rem)] flex h-12 w-12 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 backdrop-blur hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400" aria-label="Scroll to top" title="Scroll to top" > ↑ </a> </div> </main><footer class="py-10 print:hidden"> <nav class="pb-4 text-base font-medium text-neutral-500 dark:text-neutral-400"> <ul class="flex flex-col list-none sm:flex-row"> <li class="mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0" > <a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href="/tags/" title="Tags" >Tags</a > </li> <li class="mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0" > <a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href="/seo-services/" title="SEO Services 📈" >SEO Services</a > </li> <li class="mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0" > <a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href="/seo-consultant-london/" title="SEO Consultant London 👨" >SEO Consultant London</a > </li> <li class="mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0" > <a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href="/privacy-policy/" title="Privacy Policy" >Privacy Policy</a > </li> </ul> </nav> <div class="flex items-center justify-between"> <div> <p class="text-sm text-neutral-500 dark:text-neutral-400"> © 2024 Chris Haines </p> </div> </div> </footer> <div id="search-wrapper" class="invisible fixed inset-0 z-50 flex h-screen w-screen cursor-default flex-col bg-neutral-500/50 p-4 backdrop-blur-sm dark:bg-neutral-900/50 sm:p-6 md:p-[10vh] lg:p-[12vh]" data-url="https://chrishaines.uk" > <div id="search-modal" class="flex flex-col w-full max-w-3xl min-h-0 mx-auto border rounded-md shadow-lg top-20 border-neutral-200 bg-neutral dark:border-neutral-700 dark:bg-neutral-800" > <header class="relative z-10 flex items-center justify-between flex-none px-2"> <form class="flex items-center flex-auto min-w-0"> <div class="flex items-center justify-center w-8 h-8 text-neutral-400"> <span class="relative inline-block align-text-bottom icon"> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg> </span> </div> <input type="search" id="search-query" class="flex flex-auto h-12 mx-1 bg-transparent appearance-none focus:outline-dotted focus:outline-2 focus:outline-transparent" placeholder="Search" tabindex="0" /> </form> <button id="close-search-button" class="flex items-center justify-center w-8 h-8 text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400" title="Close (Esc)" > <span class="relative inline-block align-text-bottom icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg> </span> </button> </header> <section class="flex-auto px-2 overflow-auto"> <ul id="search-results"> </ul> </section> </div> </div> </div> </body> </html>