Hero section inside <header> or <main>
I have seen a .hero/.intro section (usually the big intro image on a site) both in a
<header> tag and in a <main> tag.
What would be the correct place to put it in?
Assuming standard structure:
5 Replies
I would place that in the header, since it's usually aimed at the landing/above-the-fold portion of the site.
Unless it's one of those sites mostly for presentation or to redirect to social medias and so on, but in that case a hero wouldn't make much sense.
I see hero sections as giant call-to-action buttons, should draw attention quickly to click on or react to somehow
I would do it in a main tag...never seen one of those in the header tag (unless is the same hero for the whole site, which is kinda weird)
From MDN:
The <header> element can define a global site header, described as a banner in the accessibility tree. It usually includes a logo, company name, search feature, and possibly the global navigation or a slogan. It is generally located at the top of the page.
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 sidebars, navigation links, copyright information, site logos, and search forms shouldn't be included unless the search form is the main function of the page.Would love someone to correct me if I'm wrong but this makes me think that the main tag shouldn't have repeated information that is found in the same or multiple documents from a page. Those belong to things like header, footer, navigation and asides. It also doesn't have an explicit meaning, whereas header (when placed at the top level of the document just under the body tag) has a special meaning which pretty much describes what a hero section really is.
So basically if it repeats across the site then put it into
<header> otherwise <main>?That would be my approach anyway