Search code examples
htmlsearchsemantics

Should I use a HTML5 tag for my search?


Should I use a HTML5 specific tag for my search on my new site so I can remain semantically correct? My site's structure is something like this

--------------------
      Header
--------------------
search   |   nav
--------------------
      article
--------------------
       footer
--------------------

This is my concern mostly because the search plays an important role on this page.


Solution

  • You can use:

    <input type="search">
    

    Searching is a way of navigating a website, so you could just add it to the <nav> element.

    In this case, the <nav> element could be a child element of the <header>, just like the last example in the spec.

    <header>
      <h1>Site title</h1>
      <input type="search" placeholder="Search…">
      <nav>
        …
      </nav>
    </header>
    <article>
      <h1>Page title</h1>
    </article>
    <footer>
      …
    </footer>