Quick summary
HTML headings, from <h1> to <h6>, serve as signposts in your web content. Using them correctly helps create accessible web pages.
Common problems
You want to show priority in your web content. With web copy, using heading levels (instead of larger fonts or bold) is how you accessibly rank your content by importance.
The discussion
Headings organize your web content and provide a hierarchy, calling out sections and subsections of a webpage. While their visual impact may seem subtle, their importance in accessibility cannot be overstated.
Headings are important for accessibility, page navigation, and search engine optimization
Using headings is also sometimes called using semantic HTML, or semantic markup. This refers to using information that helps define the importance of different parts of your web page.
General rules to follow
- The H1 level has the highest rank and should only be your page title. If your main headline is in H1, make your subheadings in your copy H2, and so on.
- Two headings with the same level have equal rank.
- Always follow the “ladder” of heading levels—moving up or down one step at a time. This is sometimes also called proper nesting.
Examples of proper heading structure (aka proper nesting)
Example 1: Structuring your content using headers
Example 2: HTML heading structure
Example 3: Text version of structure
- H1: My Favorite Recipes
- H2: Quick and Easy
- H3: Spaghetti
- H3: Hamburgers
- H3: Tacos
- H4: Beef Tacos
- H4: Chicken Tacos
- H4: Fish Tacos
- H2: Some Assembly Required
- H3: Tuna Casserole
- H3: Lasagna
- H4: Vegetable Lasagna
- H4: Beef Lasagna
- H2: All-In
- H3: Crab-Stuffed Filet Mignon with Whiskey Peppercorn Sauce
- H2: Quick and Easy
Writing great headings
Your headings should be:
- Informative and descriptive:
- Highlight the most important concept or piece of information
- Help users understand what they’ll find in the section below
- Concise and scannable:
- Use simple, clear language
- Keep headings to just a few words, or at most a single sentence
- Avoid using punctuation such as periods, commas, or semicolons
Keep learning
UCSC Content Style Guide
WCAG: Headings
WAVE Accessibility tool: Testing your page headings
How to see page heading structure in WordPress