Search code examples
htmlsemantic-markup

HTML 5 Section and Main semantic tags use


While studying the HTML 5 semantic tags, I've ran upon some doubts on how to proper utilize the main and section tags, and since the W3Schools reference seems a little vague and other references on the Web seems to diverge I would like to know if there is a proper guideline to the following questions or if its pretty much up to the programmer:

  1. Does the main tag also has the meaning of grouping related elements or in that case should it be within a section tag?
  2. Does it make sense to wrap single elements, such as an image, into a section tag?
  3. It's pretty common to have a header and footer of the page (not inside any section), in that case, should the remaining in between those tags be wrapped inside a section tag, as if delimiting the "content" of the page?

Solution

  • Does the main tag also has the meaning of grouping related elements

    Only to the same extent that <div> groups related elements. The primary purpose of <main> is to indicate where the dominant content of the page starts. (and additionally, according to the WHATWG spec but not the W3C one, where the dominant content of the page resumes).

    or in that case should it be within a section tag?

    A section tag is one way of grouping your content, to indicate that its contents are on a particular theme, in a way that differs from the content which is not in the section. Typically, you can and should give the section a heading using a <h[1-6]> element, which states what that theme is.

    Does it make sense to wrap single elements, such as an image, into a section tag?

    Rarely. For one thing that would mean that the section didn't contain a heading. See above. It's unlikely that any new information would be conveyed by wrapping an image on its own in a section tag.

    It's pretty common to have a header and footer of the page (not inside any section), in that case, should the remaining in between those tags be wrapped inside a section tag, as if delimiting the "content" of the page?

    No. The "content" of the section is the section less its header and footer. There's no need to add another sectioning element container.