HTML5 sectioning, nesting

[csdude55]

I still don't find a lot of the definitions for the HTML5 elements to be very clear. I'm using this as a guide:

[developer.mozilla.org...]

Am I right that a common layout might be:

<header>
...
</header>

<main>
 <section style="float: left">
  <article>
  ...
  </article>

  <article>
  ...
  </article>

  <article>
  ...
  </article>
 </section>

 <aside style="float: right">
 ...
 </aside>
 <div style="clear: both"></div>
</main>

<footer>
...
</footer>

The <header> and <footer> make sense, they're pretty obvious. But is it reasonable to say that <main> would be (should be?) a container for <article> and <aside>? And that <section> would be a container for a series of <article> tags (eg, forum posts)? And that <aside> would regularly float to one side or the other?

I know that there's no written-in-stone rules here, but I figure that if I'm rebuilding, anyway, then I should try to implement best-practices... just in case the day comes when Google decides to start penalizing sites that don't do it right! LOL

[phranque]

i would start with a detailed study of the Sections section of the HTML5 Specification:
https://www.w3.org/TR/html5/sections.html#sections

[csdude55]

Thanks, phranque, that's helpful. Hard to read, but helpful :)

The one thing that stands out is that it gives this as a description for <article>:

This could be a [u]forum post[/u], a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

So, looking at this page, I would think that my post and your reply would both be wrapped in <article> tags.

But then in the <section> example, it shows that the whole thread would be wrapped in a single <article> tag, and then each individual post would be a <section>.

So am I to understand that, instead of a forum "post" being an <article>, it should be the entire thread? So maybe just a misnomer on their part?

[tangor]

This page has nice illustrations and explanations for the new semantic elements. [w3schools.com...]

[Robert Charlton]

csdude55, where I've seen real confusion come into the discussions of this topic is that one major aspect of the Sections specification... the "outline algorithm"... has not been implemented.

As I imperfectly understand it, this gap in development would have a lot to do with how browsers are able to interpret nesting, and how they might interpret heading levels within the context of "articles" and "sections" on various kinds of page layouts... how nesting would affect this, etc etc.

In this page of the Mozilla documentation, eg, note the warning that's been added at the top....

Using HTML sections and outlines
[developer.mozilla.org...]

The warning was added by Steve Faulkner, one of the editors of the HTML5 spec, who has been extremely active in trying to get the outline algorithm implemented, and, absent that, to get warnings placed online on related w3.org and various developer pages, etc that the spec doesn't work as described. There's a copy of the warning on the page phranque cites... at the text "4.3.10.1 Creating an outline".

Faulkner is right that developers are currently assuming implementation where there is none... and, as I understand it, he knows that the Outline algorithm is the missing link which would tie all of these elements together.

I'd brought up the issue of the incomplete Section implementation previously in the Google SEO News forum, in my second post in this thread...

Must H1 tags (which I'd like to use) always be above page content?
Oct 30, 2016
https://www.webmasterworld.com/google/4824016.htm [webmasterworld.com]

Though the thread doesn't start out being related to Sections, it very much leads into that, as the implementation of Sectioning is related to the issue of multiple H1s, which came up in the thread. I've added some comments to the end of the thread to wrap up earlier discussion and to send further discussion here.

Note that the post I just added to the above thread and a w3.org page I link to relates directly enough to this discussion that I'm simply going to quote part of the post here....

HTML/Usage/Headings/h1only
[w3.org...]

Using only h1 elements in a HTML document results in a flat document outline as heading element semantics are conveyed to users as per the numeric in the heading element tag name.

See the code examples on the page, comparing...
- Intended document outline
- Actual document outline exposed by browsers and assistive technology
- Example code to convey intended document outline

There are a bunch of references at the bottom of the page to Faulkner's discussions on github, w3.org, mozilla, Google code, etc, regarding the issues involved. It becomes clear that, without the outlines algorithm, much of the Sections spec can't really work.

As I remember, some of the references linked to on the above page provide some fascinating insight into how implementation of a spec evolves.

[Robert Charlton]

PS: I'm also taking the liberty of linking to an article by Faulkner on his company blog, as it provides as an authoritative view as anything on the web of some of the issues involved... more direct and outspoken than w3.org, with some answers to implicit questions that csdude55 raises....

The HTML5 Document Outline
28 October 2013 - Steve Faulkner
[paciellogroup.com...]

Practical advice
If you as a developer want to provide a meaningful document structure, use the h1–h6 elements to express document structure. DO NOT rely upon the HTML5 document outline. By all means use the HTML5 section elements, but do not rely upon them to convey a meaningful structure. If at some point in the future the HTML5 document outline ceases to be a fiction, you will be covered as the use of h1-h6 is backwards compatible....

The comments on the article are also very much worth reading.

[birdbrain]

Hi there csdude55,

to my simple mind header, section ,article, aside and footer
elements are just a load of totally unnecessary code bloat.

And I am not the only one with this opinion...

So what's wrong with HTML 5? [cutcodedown.com]

birbrain