Official headings usage principles? [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
W3C doesn't explicitly say how exactly are we supposed to use headings or I can't find such information.
Resources:
http://www.w3.org/TR/html401/struct/global.html#h-7.5.5
http://www.w3.org/TR/WCAG-TECHS/H42.html
http://www.w3.org/TR/WCAG-TECHS/G141
This is very brief and raises many questions such as:
"Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped." - so, should we skip them or not?
When designing a sidebar - what headings should be used? H2?
When designing a footer - what headings should be used? H2?
Headings are meant to be used for lists (like a list of posts in a footer) anyway?
Should H1 be used only once on a page?
When designing a "posts listing page" - each entry usually consists of TITLE and EXCERPT - should we use H1 for titles? Or H2 or DIV?
Since headings are block-level elements, I assume that links go inside? Same for span's that are supposed to style headings in an unusual way?
If anyone could shed some light on that, it would be great :) Thanks.

Answer 1

1.Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped." - so, should we skip them or not?
Like Richard said, it is up to the programmer. In general, headings build structure into your page, like an outline you would make for a paper in school. There is a site, that creates an outline for you based on headings. Further WebAIM found that people using technology like knowing what level they are on, so jumping around, may confuse some.
2.When designing a sidebar - what headings should be used? H2?
I normally put a <h2> in so people can navigate to it easier/faster. To be honest, I haven't actively designed a page in a year or so, so if I was to do something, I would probably use ARIA instead if the sidebars really didn't need headings, and assign the "complementary" role. Using HTML5 I could simply use the <aside> tag, which natively has the complementary role.
3.When designing a footer - what headings should be used? H2?
I normally don't use headings in the footers. You can either assign the contentinfo role to the footer div, or use the HTML5 <footer> tag which again, has it native. This blog post on ARIA is helpful.
4.Headings are meant to be used for lists (like a list of posts in a footer) anyway?
Sure, you can do:
<h3>My favorite Movies</h3>
<ol>......</ol>
5.Should H1 be used only once on a page?
Long and unending debate. I am in the camp that H1's should be only used for the title of the content, such as only the question title here on SO. There was a discussion in the HTML5 group that new tags, such as <section> resets the heirarchy/outline that I mentioned above, and h1 can be used. I am not a fan or in favor of this.
6.When designing a "posts listing page" - each entry usually consists of TITLE and EXCERPT - should we use H1 for titles? Or H2 or DIV?
I'd use h2's
7.Since headings are block-level elements, I assume that links go inside? Same for span's that are supposed to style headings in an unusual way?
The proper way is <h_><a>Words</a></h_>.

Answer 2

You should read the section "Headings and sections" of the HTML5 spec. Getting the headings right is an important aspect of accessibility.
With headings (and sections) you are telling various user-agents how your page is structured, which content belongs together and which is separate from each other.
Think of a typical website with 3 columns. In the first column you have the site navigation, in the second column you have the main content and in the third column you have secondary content. Now, humans able to see might grasp immediately that there are three "areas" on the page, thanks to a different background color, margins, borders, whatever. But visually impaired or blind humans can't get clues from the graphical design of the page. Machines (like search engines) neither. Therefor we use heading/sectioning elements, so they can get the information (how the page is structured) from the markup.
Each HTML5 document has an outline, which gets created by the use of the headings h1-h6 (and hgroup) and/or the sectioning elements (section, article, nav, aside). You can think of it as some kind of TOC.
While a human able to see gets a first idea about the page structure by looking at the graphical design, humans using screenreaders and machines get this idea by reading the page outline, e.g.:
(1.) John Doe's Example Blog
(1.1) Navigation
(1.2) My first year at ACME
(1.3) Recent blog posts
This could be the outline of the following example documents:
Using headings only:
<body>
<h1>John Doe's Example Blog</h1>
<h2>Navigation</h2>
<h2>My first year at ACME</h2>
<h2>Recent blog posts</h2>
</body>
Using sectioning elements and headings with the level according to the calculated outline:
<body>
<h1>John Doe's Example Blog</h1>
<nav>
<h2>Navigation</h2>
</nav>
<article>
<h2>My first year at ACME</h2>
</article>
<aside>
<h2>Recent blog posts</h2>
</aside>
</body>
Using sectioning elements with h1 everywhere:
<body>
<h1>John Doe's Example Blog</h1>
<nav>
<h1>Navigation</h1>
</nav>
<article>
<h1>My first year at ACME</h1>
</article>
<aside>
<h1>Recent blog posts</h1>
</aside>
</body>
(The latter two are semantically equivalent!)
When using sectioning elements, you could even omit the headings altogether, the outline would still be the same, although "unnamed" (which is not very helpful!):
<body>
<nav></nav>
<article></article>
<aside></aside>
</body>
This would be the corresponding outline:
(1) (Untitled Section)
(1.1) (Untitled Section)
(1.2) (Untitled Section)
(1.3) (Untitled Section)
You can play with this online outliner to see which documents create which outlines.
so, should we skip them or not?
Why would you want to skip levels in the first place? It's probably never good, so no, you should not skip levels. But if it would happen, I wouldn't consider it a serious error.
Note however, depending on how exactly you skip, especially if you don't skip all headings of that level, a wrong outline could be created. See for example this simple document:
<body>
<h1>Interesting stories</h1> <!-- this is the site heading -->
<h2>My first snow</h2> <!-- this is a story -->
<h3>What I thought snow would be like</h3> <!-- this is a subsection of that story -->
<h3>How I experienced it actually</h3> <!-- also subsection -->
<h3>Why I'm disappointed by snow</h3> <!-- also subsection -->
<h2>More stories about snow</h2> <!-- this is not part of the story, but a kind of "See also" for the site/page -->
</body>
Now, if you'd change the last h2 to h3, suddenly this "More stories" section would become a subsection of the story. If you'd change it to h4, it would become a subsubsection.
When designing a sidebar - what headings should be used? H2?
When designing a footer - what headings should be used? H2?
These questions can't be answered in general. It depends on your site and your page and your content. But yes, in many cases for a "typical page" h2 would be the right candidate. The page heading (not to confuse with main content heading!) is h1, the main content is h2, the secondary content (sidebar etc.) is h2. If your footer would need a heading (not each one does), it would be h2 also in this case.
Headings are meant to be used for lists (like a list of posts in a footer) anyway?
It really depends on the content and the context.
The important question you have to ask (in general, for all heading decisions):
Does this content "belong" to the previous heading?
If yes:
Is it some kind of sub-section? → use a heading one level higher, resp. use a section element (and optionally a heading inside of it)
Is there no natural "sub-heading" for this content? → don't use a heading here
If no: use a heading one level lower, resp. use a sectioning element that is not a child of the sectioning element in question
(you'd have to repeat this step until your heading/section is a child of a heading that it belongs to)
Should H1 be used only once on a page?
Nope. As I explained, you could use h1 for all your headings on a page (if you use sectioning elements!).
When designing a "posts listing page" - each entry usually consists of TITLE and EXCERPT - should we use H1 for titles? Or H2 or DIV?
You should probably use an article element for each entry. So you'd get an heading automatically (= an entry in the outline), so to speak, as article is a sectioning element. Now, you could use h1 for it (no matter where the article is placed!), or you could use the calculated heading level (if the article is a direct child of body, you'd use h2. If it is one level deeper, h3. And so on.).
Use sectioning elements and headings so that a useful outline is created.
If you mark-up a webpage, look for a minute at the created outline only: Does it make sense? Do you understand by that how the page is structured, what sections it got? Is the hierarchy correct? Is a separate area/section of the page missing in this outline? Is a section a child of a section it doesn't belong to? (for example, often you see that the site navigation is a child of the page's main content, which is not correct, of course: typically they should be on the same level, both being childs of the site heading).

Answer 3

The <h_> tags are sort of redundant from the perspective of their original usage. With the ubiquity of CSS, a tag like <h4> is pretty much descriptive for all intents and purposes.
If you have a page with multiple sections then it makes sense to denote this somehow, and until the HTML5 <section id=""> tag is fully adopted a heading can be useful for some-thing reading the source code. Considerations might include:
Search Engine Optimisation: if you make some piece of text a heading, you are telling search engines, "hey, this is important!". To what extent this matters is for another discussion.
Code readability: if multiple people are working on the project, a heading is a good way to understand where breaks in the page copy occur. You can do this with <!-- Sidebar Here --> to a similar effect, but to some this is overkill.
"Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped." - so, should we skip them or not?
This is at the discretion of the programmer. You might decide to use <h1> for page headings, <h2> for section headings, but this is not written in stone. You can restyle the headings with CSS anyway, so you can favour hierarchy over appearance. If you think your sidebar is of equal importance to your tag cloud, give them the same heading classification.
Since headings are block-level elements, I assume that links go inside? Same for span's that are supposed to style headings in an unusual way?
This is absolutely correct.
The gist of what I'm saying is that W3C standards are there for reference. The development teams that make web browsers, RSS readers, etc. care about them because it means they don't have to discuss a new tag with each other. Imagine Google, Microsoft and Apple holding cross-party talks about when a <h4> or <span> tag should be used... nightmare fuel!
If a topic like those found in questions 2-6 above aren't written in stone, common sense is the fail-safe. That, and talking to your colleagues and agreeing a way forward. Sorry to repeat myself, but standards are for reference.
Hope that helps!