Thanks

And realistically, there isn’t a whole lot of need to do so, either.

As the web progresses, Google will do its best to pull the most relevant information out.

There are ways of helping the system:

- learn about the <link rel=”canonical” /> tag

- learn about microformats and microdata
( Google has a Rich Snippet Testing Tool for testing your microdata, as their engine should see it )

- use all of the elements as they’re intended to be used.
Don’t try to cheat Googlebot

- check out the Google webmaster series on YouTube.
Matt Cutts is awesome.

The more we all use them as intended, the better Google will treat us all.

Thanks
Dhanesh Mane

The idea is that *eventually*, these content sections won`t just be “pages”.

<section> and <article> elements are intended to be moved around.
Into feeds.
Onto other people’s pages as widgets.
Even just into other sections of your website (like having a “Most-Recent Comments” section on your front page, or adding your blog post to a blog roll).
All without having to rewrite any of the html, just because you changed its place.

So *eventually* you’ll want to use many H1s.
Why? Because who knows what those other pages are going to have on them.
Using the old rules of old browsers, you could use an H3 and *still* break the layout of somebody’s page (if there’s no inline-frame, and the person uses a lot of H4s).
There’s no way of knowing what’s on the other side of the widget.
So that’s why section and article elements have been made to have their own layout (ie: why each new Section supports its own Hx hierarchy).

Right now, people are using sections/articles, and they’re keeping the same H-levels that they normally would.
There’s nothing wrong with that.
And for old browsers, it’s the most compatible way of doing it.

As for SEO, I wouldn’t worry too much about that.
Once upon a time, this was a big deal, but Google has come a long way in terms of what they collect and how, and they have one of the most-compatible html5-and-friends browsers out there.

You’re still only putting 1 H1 in the body tag.
And each other H1 is inside of a new section/article element.
When Google crawls your site, they will see this.
Other engines, I don’t know…
But even as of three years ago, Google suggested using multiple H1s, if you have very good reasons for using multiple H1s — and that was for having multiple H1s in the body element (not in section/article elements).

Thanks
Dhanesh Mane

Escaped elements here:

<section class="blog-roll">
<header>
<hgroup>
<h1>Articles</h1>
</hgroup>
</header>
<ol>
<li>
<article class="blog-post">
<header>
<hgroup>
<h1>Foreheads</h1>
<h2>nature’s stupidity detector?</h2>
</hgroup>
</header>
<p>blah blah…</p>
<footer>written by me™</footer>
<section class="blog-comments">
<header><h1>comments</h1></header>
<ol>
<li>
<article class="blog-comment">
<header>
by: <span class="author">bob</span>
on: <time datetime="2012-1-27T12:40:37"
pubdate>Today</time>
</header>
<p>This spoke to me.<br />
It told me to burn things.</p>
<footer>
<img src="my_sig.png" />
</footer>
</article>
</li>
</ol>
</section>
</article>
</li>
</ol>
<footer>
<nav>Go:
<ul>
<li>ahead</li>
<li>back</li>
<li>away</li>
<li>crazy</li>
</ul>
</nav>
<small>the preceding opinions are those of someone awesome,<br />
and not necessarily reflective of the views of the<br />
awesome-impaired</small>
</footer>
</section>

In modern browsers that get the layout right, you can have nested sections in sections in articles, in sections…
Each one can have its own header, hgroup, h1 and h2, if you so desire.

As long as the nesting of your sections makes sense (to the browser), that’s exactly the intended outcome — to be able to write self-contained modules (a post, an update, an article, a tweet, a comment), and have it use its own Hx hierarchy.

In older browsers, this isn’t guaranteed to make sense to the browser’s layout engine.
So while the ultimate goal is to be able to go:

Articles

Foreheads
nature’s stupidity meter?

….blah, blah, profound-blah.
this was written by Me™

by bob
Today

This spoke to me.
It told me to burn things.

………

Go:

ahead
back
away
crazy

the preceding opinions are all awesome, and do not
reflect the views of the awesome-impaired

The sections and articles can all have their own headers, footers, hgroups and h1-h6.

But older browsers may still expect to draw the layout as if sections were still being controlled by the hierarchy of the h1-h6 tags:

In this case, the h2s might represent your “sections”, and the h3s your articles within each section.

I’ve seen some funny CCS applied to h1s and h2s inside of nested sections (where everything is browser-default), so that’s a consideration (ie: always style the headers for each of your nested sections, lest you have a tiny h1 and a huge h2).

But aside from that, I haven’t seen anything horrifying.

@tm
See the example above for what might be considered an appropriate use of sections/articles/headers/footers.


<section>
<h1>News archive</h1>
<ul>
<li>
<section>
<h2>March</h2>
<ul>
<li>
<article>
<header>
<h1>Title news post</h1>
</header>
</article>
</li>
</ul>
</section>
</li>
</ul>
</section>
</code>