Solice UI
Back to the curriculum

Chapter 2 · HTML & Semantics

Headings and lists

Headings and lists turn a wall of text into a map. They help readers skim, help screen-reader users move between sections, and make related items visibly belong together.

Beginner · Lesson 3 of 6 in this chapter

Headings describe hierarchy

A page heading names the main topic. Lower-level headings divide that topic into real sections. Heading level should follow the content hierarchy rather than the font size you want.

Lists express relationships

Use an unordered list when order does not change meaning and an ordered list when sequence matters. A description list pairs terms with explanations, which is useful for small glossaries.

Writing setup instructions

  1. A heading names the setup section.
  2. An ordered list presents steps in the order they must happen.
  3. A separate unordered list names optional tools because their order does not matter.
  • Headings create a content outline.
  • Do not pick heading levels for visual size.
  • Use list types that match the relationship between items.