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

• Using semantic elements to mark up structure

• Ordering the content in a meaningful sequence

Headings

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

• Using h1-h6 to identify headings

• Organizing a page using headings

• Providing heading elements at the beginning of each section of content

• Providing descriptive headings

Lists

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.

Techniques for Lists

• Using ol, ul and dl for lists or groups of links

Resources

• Headings and Page Structure

• Lists and Content Structure

• Headings for Screen Readers Demo

• Semantic Structure: Regions, Headings, and Lists

• 1.3.1 Information and Relationships (A)

• 1.3.2. Meaningful Sequence (A)

• 2.4.6. Describe Headings and Labels (AA)