4
I’m starting to use HTML5 and still not sure how to choose between tags <main> and <section>.
I see people using after the header <main>, while others already use the <section>. I wanted to know which is the most appropriate to make the contents of the middle page.
For example:
<header> ... </header>
<main> ou <section> ???
<footer> ... </footer>
7
From a semantic point of view, no. The tags <main> and <section> have different meanings for HTML5, which is based on ideas of semantic structure.
According to the documentation, <main> represents the content dominant page. This section should ideally contain the central topic of the document or the central functionality of an application. It should be unique.
Already <section> represents a less hierarchically important section. It is, by definition, a "generic section of the document", which has no other semantic element that best represents it.
Therefore, <section> does not replace <main>. The aforementioned documentation of <section> is emphatic in saying that this tag should be used only when no other element better semantically represent the content.
Like <main> is an element that indicates the semantics of main content, should be preferred over <section>.
As for the example of code placed in the question, I have no way to answer so that covers 100% of cases, since the choice depends on the content of the page. In general, if the content after the <header> is the main page, <main> should be used.
If not, maybe <section> makes sense, but in this case ideally another section of the page should be the "dominant", i.e., <main>.
Browser other questions tagged html html5 semantics
You are not signed in. Login or sign up in order to post.
A good place to consult about each tag with "ideal" usage explanations is on MDN, for example: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section and https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main
– Guilherme Nascimento