HTML5 and H1

My understanding is that the point of H1’s in sections is so we don’t have to care what level the section is at. This behavior seems especially useful when rendering template snippets. e.g.,

<div class="login">
    <h???>Login</h???>
    <!--
        If this login snippet is included in the main column, then we want h2.
        But if it's included in the sidebar, then we want h4.
    -->
    ...
</div>

HTML5 to the rescue!

<section class="login">
    <h1>Login</h1>
    <!--
        Now we don't need to care where it's included.
        The heading levels are relative to our particular section.
    -->
    ...
</section>

As far as SEO goes, my impression from a variety of Google employee postings is that most HTML5 markup neither helps nor hurts. The golden rule is still the same: Provide good content; don’t try to game the system.

My advice to avoid that problem: Try to find and learn from only the most authoritative sources. For SEO, for example, check what Google itself has to say in their webmaster guidelines.

Another instance of where the XHTML 2 approach would have resolved the issue as that was going to replace all of the heading tags with <h> and would have determined the heading hierarchy from the semantics of the page.

There have been several. If none of these is the one you had in mind, you could try searching for yourself.

http://www.sitepoint.com/community/t/what-to-do-when-you-have-a-logo-and-company-name/117683

1 Like

I think that is my biggest hangup with HTML5… If there was a <brand> or <source> or <company> element, then I would be totally fine with making the (other) most important thing on the web page an <h1>. But to me, it seems like a crime to just relegate your company name/brand to a generic <div> or <span> or <p>:confounded:

You make an interesting point, and a situation I too have encountered with my own home-grown dynamic pages.

Yes, that seems consistent with my research too.

However, here is another concern I have with my examples in post #7

From what I have read, HTML5 is somewhat bossy with your use of headings. For example, if I have this…

<body>
    <header>
        <h1>Mikey Consulting</h1>
    </header>
    <nav>
    </nav>
    <article>
        <h2>All About Responsive Design</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor finibus nulla, nec condimentum lectus vestibulum bibendum. Duis fermentum mollis tortor, porttitor ultricies orci pulvinar ut. Pellentesque sollicitudin, eros eu dapibus aliquam, neque magna convallis odio, egestas placerat lorem sem sit amet nisi. Maecenas imperdiet feugiat lectus, quis ultricies justo mattis sed.</p>
        <h3>How It Can Help</h3>
        <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer maximus gravida turpis sed elementum. Vivamus quam lectus, tristique nec eros non, porttitor fermentum dui. Aliquam erat volutpat. Vestibulum nec dictum velit.</p>
    </article>
</body>
...then HTML5 treats my ```<h2>``` as an ```<h1>```` for the section.  Following that logic, my ```<h3>``` gets changed to an ```<h2>```...

The point being that you could argue that HTML5 is creating a bigger mess than your example, because it is deciding for you what it things each ```<Hx>``` should be.

(It would be nice if there was a plug-in where you could see your literal heading structure on the left and how HTML5 changes it on the right.  Almost like a code comparison tool!)

If you really are uncomfortable about using multiple h1 tags, html5 does not force you to do that, it just gives you the option to do it if you want to. You can write in html5 and still use the traditional header hierarchy if you wish, the choice is yours. It really is not a big deal.

You can use structured data mark-up for this, to identify company names and logos (and much more) to the bots.

But are you certain that if I nest a heading element inside a “sectioning” element (e.g. “section”) that it won’t give that heading a different value?

For example, what would happen if I had one and only one <h2> inside of a <section>?

Isn’t “structured data” a Google-only thing?

What do you fear may happen? I don’t think the sky would fall in. These are IMO minor details, of little importance or consequence. The validator returns a Warning (not an Error) if a section has no header. So each section should have (but not strictly must have) at least one header.

Google does encourage the use of structured data, and Bing uses it too. I can’t confirm that the other SEs do or don’t, only that the two leading ones do.

Collapse of the space-time continuum? :confused:

I thought HTML5 might change said ```<h2>``` to an ```<h1>``` than then that could lead to multiple ```<h1>````'s which I want to avoid.

(I'm not sure if this is more likely to happen if the ```<h2>``` was free-standing in the  ```<section>``` or if it was inside a ```<header>```  that was inside a  ```<section>```.)


[quote="SamA74, post:30, topic:197557, full:true"]
Google does encourage the use of structured data, and Bing uses it too. I can't confirm that the other SEs do or don't, only that the two leading ones do.
[/quote]

But you make it sound like “structure-data” is an agnostic thing - almost like a web-standard?

I have heard of it in the past in other forms of IT and in recent times via Google’s Search Console, but I really don’t know what it is in this context.

HTML5 isn’t going to change any of the tags you use

These articles from Google and Bing explain how structured data markup can help them to help your site in search results.
Because machines cannot always interpret human language correctly, this helps by giving them some pointers that put the words in context and explicitly state their meaning. For example, if your article mentions Apple, a bot does not know if you are talking about a type of fruit or a well known computer company. A human would probably know by the context in which the word “apple” was used, a bot may need some additional help. That is where structured data comes in and clears up any ambiguity.
Use of structured data is of course optional. Maybe for now you just want to concentrate on creating, styling and making the site responsive. Once you have that, you may want to consider adding markup. I say this because it can lead to some complex nesting of <span>s or <div>s (or other elements) which may confuse things during the initial development stage.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.