HTML5 Outliner

[danyadsmith]

I have started to test some markup using HTML5. I installed the HTML5 Outliner (available as a Google Chrome extension) and noticed that on many sites the sectioning elements <nav>, <article>, <section> display in the outline view as Untitled NAV, Untitled ARTICLE, etc.

After some testing, I found that if I included an <h> element (I tested using <h1> inside the sectioning element), the text inside the <h> tag displays in the Outline.

Initially, I tried to add text to the title attribute: <nav title="Display Name Goes Here">.

I'm wondering...

Why does each sectioning element require an <h1>-<h6> tag in order to display a proper title in an Outliner routine? If I don't want that heading to display on my page, I have to set the style on the element to style="display:none;" which could be problematic with SEO/search rankings as Google does not *like* sites that attempt to hide content from users, etc.

Would it make sense to pull the title of a sectioning element from the title attribute instead? If not, why not?

[franckbret]

Hi
I'm also interested by this issue.
Anyone ?

[JAB Creations]

The best way to think of a properly designed website is like a newspaper with headers, paragraphs, and images. The largest headline on a newspaper would be considered the top story so on a web page you would use the h1 element and only once. While you can technically use it more then once it's bad practice and can gimp your pages rankings by clearly abusing the semantics of the elements. You should not have an h3 element without it being a subset of an h2 element and you should not have an h4 element without it being a subset of an h3 element.

The h element can be thought of as the lazy programmer's HTML. I don't agree with it because it removes the ability to describe which header element is the main header and which headers are subsets of other headers.

If you need to hide content then it shouldn't be on the page to begin with or loaded via AJAX. Infrastructure is different if you load things via AJAX in to an element as a container.