Title - Details

See more about:


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.

Visually connect title and details

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>


You can see an example.


How to...