Blog Heading Levels: Make Sections and Subsections Clear

Choose a blog heading's level from its place in the article: main sections share a rank, and their subsections sit one level below. Decide those relationships before choosing how large or bold the headings should look.

A heading rank is the structural level represented by an element such as h2 or h3. It is separate from the font size used to display it. Two headings can look alike while having different ranks; a large line of ordinary text is not a heading merely because it looks prominent.

W3C WAI's headings tutorial recommends nesting headings by rank and avoiding skipped levels when moving into a subsection, where possible. It also distinguishes that descent from returning to a higher-level section. This gives you a practical way to turn an outline into a hierarchy.

Give each heading a parent

Start with the article's title and ask which sections belong directly to the article. Then ask whether any smaller section belongs inside one of those sections. Sections with the same parent should have the same rank.

Here is an original fictional guide called Organize a Small Sticker Collection. Its page title sits outside the article body. The two main sections are Sort the stickers and Record the location; the sorting section has two smaller sections. The imagined task is a teaching example, not an account of an organizing exercise someone performed.

The completed body outline below shows the relationship in use. The short passages are also invented teaching copy.

Sort the stickers

Use the following two groups to give each sticker a temporary place before recording its location.

Group by theme

Put the imaginary plant stickers together and the imaginary space stickers together. In this example, theme is the chosen grouping rule.

Separate uncertain items

Put stickers whose theme is undecided in a group labelled Undecided. This is another part of sorting, so it is a sibling of Group by theme, not a subsection inside it.

Record the location

Write the group's name and the folder pocket holding it. This step follows sorting and belongs directly to the article, so it returns to H2 rather than continuing under the last H3.

Distinguish a descent from a return

The example's sequence is H2, H3, H3, H2. It moves down to a subsection, stays at that rank for a sibling, then returns to a main section.

By contrast, moving directly from h2 to h4 to start a child section leaves a level out. Ask whether the child should be h3, or whether a genuine intermediate section is missing from your outline. Do not insert a meaningless heading just to complete the sequence.

Returning from h4 to h2 is a different move: it ends the intervening subsections and starts a new main section. The WAI tutorial permits that return. The direction and the parent relationship matter; a change of more than one number is not automatically an error.

Keep the outline and the saved structure in agreement

Download the filled heading-outline card (Markdown). It contains the completed sticker example and a reusable entry for your next article. For each heading, write its parent, intended rank and the question or action its section covers. Move a heading when its parent changes; changing only its appearance leaves the old relationship unresolved.

When editing, select the intended heading level, then inspect the saved or published heading elements against the card. Check that sibling sections share a rank and that child sections descend coherently. A visual preview alone cannot establish the underlying elements.

This example addresses an article body with its title supplied separately. Whole-page navigation, sidebars and other fixed regions need consideration too; the WAI tutorial explicitly discusses fixed-region exceptions. A filled outline is not a complete accessibility assessment, and no assistive-technology test is reported here.

Choose the article's useful question in your blogger's keyword plan, develop the article's answer, and keep the section relationships in its brief.