A Little Clarification

A Little Clarification

I’ve made it about 75% of the way through the responsive web design course, and I’ve been understanding most of it fairly easy enough, but I am having a problem understanding how the “h” tags work (h1-h6) I understand that H1 is the most important, and the decrease in importance as they go up. I guess my issue is, how do you decide where they go and how many of each do you use. I know you can use as many as you want, but i guess I’m just a little lost.

Semantically speaking, you use H1 as a top-level heading, H2 as a sub-heading, H3 as a sub-sub heading and so forth, up to six levels of sub-headings. Generally speaking you don’t want to skip headings, and put, say, an H3 under an H1 without an H2 inbetween somewhere. By sticking to the semantic meanings, tools like screen readers can generate an outline and navigate between different headings in a logical fashion. It’s not an iron-clad rule though, and an outline generator can always gracefully handle skipping a heading; it’s more of a guideline.

Personally, I don’t use more than H1-H3, but your needs may be different. You’ll definitely want to use CSS to change the appearance of the smaller headings – H6 is ridiculously tiny, for example.

I have never ever seen anyone use an h6

Only lawyers and politicians use H6. Even the Catholic Church has only five levels of hierarchy.