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>
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.