Question:
I'm starting to use HTML5 and I'm still not sure how to choose between the <main> and <section> tags.
I see people using the <main> after the header, while others already use the <section> . I would like to know which is the most appropriate to make the content in the middle of the page.
For example:
<header> ... </header>
<main> ou <section> ???
<footer> ... </footer>
Answer:
From a semantic point of view, no. The <main> and <section> tags have different meanings for HTML5, which is based on ideas of semantic structure.
-
According to the documentation,
<main>represents the dominant content of the page. This section should ideally contain the central topic of the document or the core functionality of an application. It must be unique. -
Now
<section>represents a less hierarchically important section. It is, by definition, a “generic section of the document”, which has no other semantic element that better represents it.
Therefore, <section> does not replace <main> . The aforementioned <section> documentation is emphatic in saying that this tag should only be used when no other element better semantically represent the content.
Since <main> is an element that indicates the main content semantics, it should be preferred over <section> .
As for the code example posed in the question, I can't answer in a way that covers 100% of the cases, as the choice depends on the content of the page. Generally speaking, if the content after the <header> is the main page of the page, <main> should be used.
Otherwise maybe <section> makes sense, but in this case ideally another section of the page should be the “dominant”, ie <main> .