Hero and semantic ordering
July 30, 2025
I was working on a task this morning that involved refactoring heroes on our website. As I was looking at all the different variations and thinking about how we could simplify, I noticed that almost all the heroes on the site live inside of a main HTML element.
My first inclination was to think that this is not “right.” I think that a hero should live outside of the main element. That is the way that I have coded them in the past. I use a header element for the hero that goes before the main tag.
But I decided to do some research and not just go with what I thought was the “right” way to do it. I did a Google search. And because I didn’t cuss in my search query, I got an AI result before anything else. According to the AI summary:
A “hero” section, typically a prominent, full-width area at the top of a webpage, is generally not considered part of the
<main>HTML element.The
<main>element is intended to encapsulate the dominant content of the<body>of a document, excluding content that is repeated across a set of documents, such as site navigation, headers, and footers.While a hero section may contain important introductory information, it often serves a more visual and navigational purpose, acting as a visual gateway to the main content rather than being the main content itself.
But I don’t want to trust AI without doing a bit more digging. So I looked to MDN.
The
<main>HTML element represents the dominant content of the<body>of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.
So the question is, is the hero a part of the central topic of the document? I have been operating under the belief that it is not. I decided to reach out to some other developers on Bluesky to get some opinions from them.
Should a hero (header) be contained within <main>? I do not think it should based on the semantic meaning of <main> as the dominant content within the body. But I would like to hear some other thoughts. @cferdinandi.bsky.social @kevinpowell.co @chriscoyier.net @matthiasott.com @hidde.blog
So far I have only heard back from Hidde de Vries.
would say no in most cases, unless it contains something that is ‘main’ like the main heading
Okay. The heroes that I was considering all had main headings in them for the title of the page. I replied back to him:
So are you saying if the hero contains the title of the page in a main heading that the hero should inside of ‘main’?
I have not yet received a reply. But taking his response at face value, it got me wondering if my belief/assumption about the hero not being contained within the main element is correct. It makes sense that the main heading is important to the document and that it should be included with the dominant content, which according to MDN, would be within the main element.
This is hard
This is a hard one. One one hand, the heroes that I am dealing with have the main heading of the page contained within them. But on the other hand, there is other content, like a short summary of the page, call to action buttons, or additional page navigation. It is not clear cut to me what the answer to my original question (Should a hero be contained within a main element?) should be.
And that is the thing that I have found with HTML. There is not a lot of clear cut answers. And I still am confused about a lot of the HTML5 sectioning elements and what is the best semantic choice.
I decided to watch one of Kevin Powell’s recent videos, Is HTML the hardest language? Kevin shares things he learned after giving a challenge to his followers in a recent quiz. I think the video does a great job of highlighting the fact that it is much harder to get HTML right than it is with CSS or JavaScript.
Stephanie Eckels echoes a similar concern in her article, A Call for Consensus on HTML Semantics. Her conclusion about choosing the “right” HTML element for your solution is “it’s never clear cut and certainly not simple.“
It is not clear cut. And several of the HTML5 tags just added to the confusion and did not clear things up. See Heydon Pickering’s article about the article element.
For further thought
- Is HTML the hardest language? (video)(Kevin Powell)
- A Call for Consensus on HTML Semantics (Stephanie Eckels)
- The article element (Heydon Pickering)
- Choosing HTML elements is hard (February 2024) – It wrote about this subject before. Don’t miss the long list of further reading at the bottom of the post.
Joe Crawford
August 2nd, 2025
HTML is expressive. It’s human expression. As such there is not an ideal “right” state for a particular thing we might want to express. We may revisit a page a month later, a year later, a decade later and rethink what semantic emphases are correct for a given piece of writing and multimedia encapsulated by a page.
I think if you consider the header element core to the page’s semantics then it is. And if you consider it not-core and supportive, it is.
As a practical matter, finding out how assistive/accessibility tools treat those elements is in your interest, because along with search engines, those are the main entities that pay attention to that semantic markup.
I attended a panel held by a small group of non-sighted users and they encouraged developers to find other such users as “beta readers” of web pages to determine how well the web pages are “doing” accessibility. I wonder if that might be a good addition to your research.