Goals

Help users see the structure of the content on a page. Sections of the page, subsections, subsubsections, etc. This page has sections Context, Goals, etc.

Make it easy for users to scan a page to see what information is there.

Implementation

Look at the HTML source of the example.

Comments

Make it clear which heading belongs with which content. Compare the top and bottom halves in Figure 1.

Figure 1. Visually connect heading and details

In the bottom half, it’s more obvious which content and heading go together. That’s done by:

• Having more vertical whitespace above a heading than below it.
• Indenting.

You can nest subsections within sections, subsubsections in subsections, etc.

When nesting, make the lower level headings look less important. E.g., <h2> could be bigger and bolder than <h3>

You can see a sample.