How to Properly Use H1 in HTML5

How to properly use h1 in HTML5

As I state in my comment and you quote in the W3C, h1 is a heading and not a title. Each sectioning element can have its own heading element(s). You cannot think of h1 as being the title of a page only but as the heading of that particular section of the page. Just like the front page of a newspaper, each article can have its own heading (or title).

Here is a good article on this.

How to use h1 to h6 within header, section, article, etc.. in html5?

The best SEO is to have good content, simple as that! Semantically what you have illustrated here is fine. What is new in HTML5 is that containers like <footer>, <header>, <section> and <article> have their own internal structure, as it were. So the outline of your first example would be:

My personal homepage

1. My resume

If you were to change the markup to this:

<html>

<body>

<h1>My personal homepage</h1>

<h2>Introduction</h2>

<p id="intro">...<\p>

<h2>About me</h2>

<section id="resume">

<header>

<h1>My resume</h1>

<h2>Overview</h2>

</header>

<p>...</p>

</section>

</body>

The outline would be:

My personal homepage

1.  Introduction

2.  About me

    1.  My resume

        1.  Overview

See section 4.4.11 of the draft for an explanation. Geoffrey Sneddon has made the HTML 5 Outliner tool for checking the outline of a page.

Is a good practice put a canvas into a H1, H2 (..etc) heading for HTML5 semantic?

This question is not different to "Should img be putted into h1?", or even to "Should the word "foobar" be putted into h1?" → It depends on your content.

The canvas represents content, typically an image. If this image is part of the heading, put the canvas in the heading. If this image is described by the heading, don’t put it in the heading.

Don’t forget to include fallback content, e.g., <canvas></canvas>. This fallback content would be part of the heading (for older user-agents, screen readers, search engines, …). If it doesn’t make sense in the heading, canvas shouldn’t be there in the first place.

Note that the canvas HTML5 spec has, what might seem, a relevant paragraph:

Authors should not use the canvas element in a document when a more suitable element is available. For example, it is inappropriate to use a canvas element to render a page heading: if the desired presentation of the heading is graphically intense, it should be marked up using appropriate elements (typically h1) and then styled using CSS and supporting technologies such as XBL.

But this example assumes that one would use canvas instead of an appropriate element.

H1, H2, H3, H4, H5, H6 inside table TH tags? - HTML

The HTML living standard explicity forbids this. The th element content model is as follows (emphasis added):

Flow content, but with no header, footer, sectioning content, or heading content descendants.

"Heading content" refers to the h1, h2 etc. elements, as well as the hgroup element:

Heading content defines the header of a section (whether explicitly
marked up using sectioning content elements, or implied by the heading
content itself).

h1 h2 h3 h4 h5 h6 hgroup

HTML5: Should I use h2's or h3's for content inside of an aside element?

You really shouldn't be using multiple <h1>s on a page. The h tags are primarily used to dictate document structure. The Web Content Accessibility Guidelines (WCAG) 2.0 standard shows examples that the h1 tag should title the page. Most states (Illinois, for example) have their own outlines on Accessibility standards. Illinois' in specific outlines that there should only ever be one h1 tag on a page and that it's contents be similar to the <title> tag. While this can be, and probably will be, argued, it makes semantic sense to only use one h1 tag and let the other 5 layers sit nested correctly.

Really, common sense plays a big role in structuring your other h tags. Imagine looking at your site in an 'outline mode' when you're done. Does it make sense?

For example, say you want the outline of your site to look like this:

Page Title

Content
 - Article
   - Sub-article
 - Article

Sidebar
 - Weather
 - Local News

Then this is how your heading tags should be working:

<header>
  <h1>My News Website</h1>
  <nav></nav>
</header>
<section>
  <article>
    <h2>Article Title</h2>
    <p>Blah Blah Blah.</p>
    <h3>Sub-heading in Article</h3>
    <p>More blah blah blah.</p>
  </article>
  <article>
    <h2>Article Title</h2>
    <p>Blah Blah Blah.</p>
  </article>
</section>
<aside>
  <h2>Weather</h2>
  <p>Weather information.</p>
  <h2>Local News</h2>
  <ul>
    <li>News Item</li>
    <li>News Item</li>
  </ul>
</aside>

As long as things you want at the same level share the same heading number, then you're on the right track. Things that relate to a heading that contextually make sense to be "under" said heading should increment the heading number by one.

Lastly, you can have an outline of your completed site shown to you by using the HTLM 5 Outline. Check it out here: http://gsnedders.html5.org/outliner/

How to Properly Use H1 in HTML5