Search code examples
htmlsemantic-markupsearch-form

If you can't place the search bar inside the <header>, only inside the <main> - Which tag can you place it into?


Assuming one can't place the search bar inside the <header>, only inside the <main> - What would be semantic reasonable tag to place the search bar <form> or container in?.

Most websites talk about the "best" place to put the search bar at, which is the <header> as far as I understand, but in case one can't place the search bar inside the <header>, no one talks about a semantic reasonable alternative.

So I am trying to understand if I should leave the search bar in a simple <div>...</div> or is there any tag which makes more sense in terms of semantic writing. I did think about <section>, but after reading on it in several existing threads here, one should use <section> with headings, and I find it odd to add <h1> for a "Search Bar". Would love to hear your thoughts about that matter. Currently, I use <div> for the search bar, and if no better alternative out there - would keep using it. This is my current code:

<main>
    <aside>
        ...
    </aside>
    <div class="CenterCenterDiv">
        <div class="SearchBar">
            <form>
                <div class="TitleDiv1">Search For Anything</div>
                <div class="autocomplete InputBox">
                <input name="Search" id="Search" type="text" placeholder="Search Here...">
                <input name="Submit" type="submit" value="Search" class="InputButton">
            </div>
        </form>

        Content
        Content
        Content
    </div>
</main>

Solution

  • There's not a semantic way to put a site-wide search box within the <main> element of a page (unless that page is the search page).

    MDN Web Docs: Usage Notes for the <main> Element states:

    The content of a <main> element should be unique to the document. Content that is repeated across a set of documents or document sections such as...search forms shouldn't be included unless the search form is the main function of the page.