Does the <Section> tag replace the <main>?

Asked

Viewed 49 times

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>
  • 2

    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

1 answer

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

You are not signed in. Login or sign up in order to post.