Title - Details
Any Web page that presents content.
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.
Look at the HTML source of the example.
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.
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
You can see an example.