Heading tags are probably the most misused tag in all of HTML. Since the advent of CSS, many web-designers no longer care that an H1 tag is the most important tag of the page or that an H2 is the second most important tag. I have seen pages with multiple H1s and only a few H2s, or pages where HN (where N > 1) styles are bolder than H1 tags. You might be asking yourself, why should I care since CSS can masked these flaws? Well, here are few reasons:
- Semantic HTML - following this practice your HTML design should have meaning; so an H1 tag should mean the most important Heading on the page and H2 the second, etc
- Accessibility - Screen Readers do not understand the class or styles you have applied to your tags, they take meaning from context and assume the importance of a heading is based on the HTML specification (H1 > H2 > H3 …)
- No CSS - If a user turns their CSS off, your page won
t make as much sense as the browsers expect heading tags to follow HTML specifications
- Cleaner code - Generally, you need less HTML and CSS code when properly using tags
Points 1-3 can really be summed up by saying that your pages should make sense contextually, and with or without CSS. By writing semantic HTML your code is easier to be read by and shared with your colleagues. Typically, semantic HTML is cleaner as well. In this case, you can replace whatever you are using to show your page headings (I was using: "<div class="header">) with just <h1>.
When I redesigned some of my older work to be more semantic, I came up with these rules:
- H1 - page heading/title, each page should have no more than 1 of these (except very rare situations)
- H2 - page subheading/subtitle, should follow H1 tags; I reserve this tag for subheadings, because in most projects I use an optional subheading below my page headings.
- H3 - section headings/titles, each content block on the page usually needs a heading and I reserve this tag for that purpose
- H4 - section subheadings/titles, should follow H3 tags; again, I reserve this for a possible sectional subheading
- H5 - mini-sections, inside of a section; often I style these only slightly large than the surrounding text and with an underline
- H6 - minor-sections, often used when multiple ideas are expressed below an H5, but can be used in place of the H5 tag. Same style as H5, but no underline
When styling your tags, I use these general rules:
- all your heading tags should be bolded and (slightly) larger than surrounding text
- font-sizes should scale with H1 being the largest and H6 being the smallest
- sometimes, I use the same font-size for the tags used in conjunction (ie, H1 size = H2, H3 size = H4, H5 size = H6), but that is up for designer interpretation
- I like to use a color different from the rest of the text for H1 and H2 tags (and possibly a background color as well, depending on design), but use the standard text color for all other headings
- I generally dont use the underline text style for tags (except H5), instead if a heading needs to be underlined, then apply a bottom border line
- and all heading tags should be block level
Following these guidelines, I find it easier to move between projects and make quick design changes. My markup is also simpler and I need less CSS selectors to change my heading styles than I previously needed when each DIV or heading tag had required a class or id selector to overwrite the default style. Lastly, my pages make a lot more sense when viewed by a Screen Reader or without CSS.