CODEWITHSUNDEEP
htmltags
gespinha
gespinha

Reputation: 8487

Body represents a Section when related to child footer or header elements?

Very simple and fast good practice doubt. As W3C states, the header and footer tags should be equivalent to their parent section, where as for every header or footer elements there should be only one parent section, so the browser understands that those specific header and footer tags as the header and footer of that specific section of the page.

My question is, with this in mind, can the body be considered a section, letting do something like this correctly:

<body>
  <header></header>
  <footer></footer>

  <section>
    <header></header>
    <footer></footer>
  </section>
</body>

Or should a section be always an actual section, where the correct coding practice would be like this:

<body>
  <section>
    <header></header>
    <footer></footer>
  </section>

  <section>
    <header></header>
    <footer></footer>
  </section>
</body>

Any suggestion?

Upvotes: 3

Views: 574

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

W3C HTML5 CR says that the body element is a sectioning root, so there is no reason to wrap its content in a section element. It would even be misleading, since it describes the section element so that it “represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.” It’s pointless to group everything into one group.

On the other hand, there is no evidence of browsers actually caring the least about the “semantics” of section, header, etc. Modern browsers just have some default rendering rules for them, that’s all; older browsers ignore the tags and just render the content as if the tags were not there.

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191729

The documentation on sectioning content is slightly unclear about this. The only elements that are sectioning content

content that defines the scope of headings and footers

are article, aside, nav, and section. However, blockquote, body, details, fieldset, figure, and td are sectioning roots, which can have their own outlines.

There is also an example on the page

<body>
    <header>
    ...
    </header>
    <footer>
    ...
    </footer>
</body>

...so all of this indicates that you are good to go with <header> and <footer> in <body>, and in point of fact this is different than if you had another section because those on the body would be higher up in the outline than sibling sections.

Another thing to keep in mind based on the spec is that those "sectioning root" elements do not affect the outline of their ancestors (although they will be lower than ancestor roots).

For example:

<section>
    <header>head</header>
    <fieldset>
        <header>head2</header>
    </fieldset>
</section>

In this case "head" and "head2" are on the same level in the document outline because <fieldset> is a sectioning root. If it were <section> instead, it would be nested in the "head" node. You can confirm this with this handy web utility

Upvotes: 1

Related Questions