[dalcorn]

I've just finished reading A book apart's HTML5 for web designers and am confused by their suggestions regarding section/article elements and the h1 tags.

The author makes the point that because these new elements successfully section the page, you can have h tags relevant to the content within the opening and closing tags and not to the page.

The example they use is this

<h1>My awesome blog</h1>
<article>
<h1>Cheese sandwich</h1>
<p>My cat ate a cheese sandwich.</p>
</article>

Surely, whilst this may be good semantically, this is bad for search engines? Would this be a case of the author being a designer and not skilled with SEO?

[SniderDK]

Quote

Surely, whilst this may be good semantically, this is bad for search engines?

its a new standard... new rules except the golden rule.... DONT SPAM...

think semantically the below is "correct"

<article>
<header>
    <h1>title of post</h1>
    <p>blog post</p>
</header>
    <p>...Lorem Ipsum dolor set amet...</p>
</article>

[dalcorn]

SniderDK, on 21 January 2012 - 11:26 PM, said:

its a new standard... new rules except the golden rule.... DONT SPAM...

think semantically the below is "correct"

<article>
<header>
    <h1>title of post</h1>
    <p>blog post</p>
</header>
    <p>...Lorem Ipsum dolor set amet...</p>
</article>

Yeah this is the structure I've gone with in the design I'm working on. So search engines no longer look to the H tags for a title hierarchy?

At the moment I'm working on a structure of:

h1 - page title
h2 - page sub-title
h3 - section title (eg, latest posts)
h4 - article title (becomes page title in a blog post)
h5 - article sub title (becomes page sub-title in a blog post)

So the correct way to do it now (both semantically and from an SEO point of view) would be to?:

<header>
h1 - page title
h2 - page sub-title
</header>
h1 - section title (eg, latest posts)
<section>
<article>
<header>
h1 - article title (becomes page title in a blog post)
h2 - article sub-title (becomes page sub-title in a blog post)
</header>
<p> ...Lorem Ipsum dolor set amet...</p>
</article>
<article>
<header>
h1 - article title (becomes page title in a blog post)
h2 - article sub-title (becomes page sub-title in a blog post)
</header>
<p> ...Lorem Ipsum dolor set amet...</p>
</article>
</section>

[zed]

some people think too much.

[Wickham]

Have a look at this:-
https://developer.mo..._HTML5_document
which discusses h1 tags for section tags.

Adapted from the Sections and Outlines tutorial link above:- "Note that the rank of the parent element (<h1> for a first top-level section, <h2> for the subsection and <h3> for a second top-level section) is not important: though less clear and not recommended, any rank can be used as the heading of an explicitly-defined section." So you can start a new element which is a top-level parent with a lower ranking h tag like <h3> (as long as other h tags and those in any nested elements have the same or lower rank eg <h4>, etc., but not a higher rank).

Also "Note: Each section can have its own heading hierarchy. Therefore, even a nested section can have an <h1>"

The old recommendation to use h1 only once on a page is now out of date, so you can use h1 for every section (or aside, etc.) However. I assume also that any h1 tag should not be nested inside a lower ranked h tag.

This post has been edited by Wickham: 22 January 2012 - 09:05 AM

[dalcorn]

Wickham, on 22 January 2012 - 08:56 AM, said:

Have a look at this:-
https://developer.mo..._HTML5_document
which discusses h1 tags for section tags.

Adapted from the Sections and Outlines tutorial link above:- "Note that the rank of the parent element (<h1> for a first top-level section, <h2> for the subsection and <h3> for a second top-level section) is not important: though less clear and not recommended, any rank can be used as the heading of an explicitly-defined section." So you can start a new element which is a top-level parent with a lower ranking h tag like <h3> (as long as other h tags and those in any nested elements have the same or lower rank eg <h4>, etc., but not a higher rank).

Also "Note: Each section can have its own heading hierarchy. Therefore, even a nested section can have an <h1>"

The old recommendation to use h1 only once on a page is now out of date, so you can use h1 for every section (or aside, etc.) However. I assume also that any h1 tag should not be nested inside a lower ranked h tag.

That's great thank you that's exactly the info i was looking for.

[Renaissance-Design]

Wickham, on 22 January 2012 - 08:56 AM, said:

"Note: Each section can have its own heading hierarchy. Therefore, even a nested section can have an <h1>"

This is the best explanation I've heard. Short and to the point. Advice for SEO: according to Matt Cutts (CBA to dig up the link) Google does not penalize for having more than one H1. I'd suggest only doing it semantically in HTML5, because I'm fairly sure Google looks at the ratio of headings to content.