The Ultimate Guide to HTML Headings

Here are my guidelines for HTML headings in no particular order:

• Guide your users with headings. New users may not know who you are or what is on your website. Use headings to help your users navigate your website.
• Use CSS to enlarge headings. Make them big and clear enough. For h1, make them the largest and the boldest text on all pages. Be bold.
• Make headings visible. Visually hidden headings are not accessible for non-assistive technology users. Visible headings are always preferable.
• Make sure each heading labels the information below it.
• Use HTML headings in a logical order. Users of assistive technology can use heading tags to navigate the website. If headings are not in a logical order, the users can get confused.
• Do not skip heading levels. They must always be in chronological order to give structure to a page.
• Have one h1 for each page. The HTML heading one element defines the main heading of a page. Having many h1 elements may confuse assistive technology users. Users browsing with CSS disabled or in reading mode can also get confused. Instead of using many h1 elements, use other heading elements—such as h2, h3, and h4—to make subheadings and to structure the information on the page.
• Do not use heading elements to make a text big and bold. Headings are used to structure page and have semantic meaning. For presentational purpose, use CSS.

Some guidelines can be applied when you structure information using a word processor.