Context

Any Web page that presents content.

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 title belongs with which details. Compare the top and bottom halves in Figure 1.

Figure 1. Visually connect title and details

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

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

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

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

Example

You can see an example.