Headings & Structure


Semantic Structure


Success Criteria for Headings, Lists, and Structure

Using appropriate semantic elements 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 meaningfully parse and read page content.

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


Headings create 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.

All heading levels can contain all types of content including paragraphs of text, hyperlinks, lists, images, embedded videos, tables, etc. Headings improve access for people with disabilities, but they also improve readability for everyone.

Techniques for Headings


Lists


Use list styles to format lists of information. Like headings, lists create 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

HTML

Rich Content

Unordered
<ul>

<p>Shopping list</p>
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Bread</li>
</ul>

Shopping list

  • Milk
  • Eggs
  • Bread

Ordered
<ol>

<p>The five phases of ADDIE are</p>
<ol>
<li>Analysis</li>
<li>Design</li>
<li>Development</li>
<li>Implementation</li>
<li>Evaluation</li>
</ol>

The five phases of ADDIE are

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


Techniques for Lists


Resources