Headings & Structure

Semantic Structure

Using appropriate semantic elements like headings, lists, and other page structures gives our documents and web content a cleaner and more consistent visual appearance. Semantic elements also provide the necessary structure for assistive technologies like screen readers to navigate and read page content meaningfully.

Designing digital information with semantic elements is easy. Virtually every content authoring tool we use includes a graphical toolbar (WYSIWYG) for formatting headings, lists, hyperlinks, tables, and other semantic elements. Apply these structural elements whenever possible.

Techniques for Semantic Structure


Headings create a hierarchical structure in web pages and documents. Heading levels include h1, h2, h3, h4, and sometimes h5 and h6. Headings “chunk” content into sections based on importance. Avoid skipping heading levels like jumping from h1 to h3 without an h2.

Techniques for Headings


Use list styles to format lists of information. Like headings, lists create a semantic structure that improves readability for everyone and navigation for assistive technology.

  • Unordered Lists
    If the list has no particular order or sequence, then use a bulleted list.
  • Ordered Lists
    If the list does have an order or sequence, then use a numbered list.

List Type


Rich Content Editor


<p>Shopping list</p>

Shopping list

  • Milk
  • Eggs
  • Bread


<p>The five phases of ADDIE are</p>

The five phases of ADDIE are

  1. Analysis
  2. Design
  3. Development
  4. Implementation
  5. Evaluation

Techniques for Lists