I'm starting to use HTML5 and I'm still not sure how to choose between the
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.
<header> ... </header> <main> ou <section> ??? <footer> ... </footer>
From a semantic point of view, no. The
<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.
<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.
<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.
<main> is an element that indicates the main content semantics, it should be preferred over
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.
<section> makes sense, but in this case ideally another section of the page should be the “dominant”, ie