html – the tag<section> replaces the<main> ?


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>


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> .

Scroll to Top