Meaningful markup

Use meaningful HTML markup to indicate the page structure and text language

Web pages with unclear structures and organization can be doubly confusing for individuals with disabilities. A meaningful HTML markup helps users of assistive technology better understand the structure of a page.

Use semantic designations such as lists, block quotes, and tables to make web pages easier to navigate and understand.

Benefits

These measures allow users of assistive technology to better understand different page structures and the arrangement of content, which improves navigation.

The measures also ensure more accurate pronunciations of page content, as well as the improved indexing of language changes.

Examples

Unordered lists

“Unordered lists” indicate that order does not matter for that content section:

List item 1
List item 2
List item 3

Unordered lists should be coded using the <ul> tag, and each listed item should be within a <li> tag

See the <ul> and <li> tags on lines 7 through 11 below:

<!doctype html>
<html lang="en-US">
  <head>
    <title>Meaningful HTML Markup - Web Accessibility Top Ten - UITS</title>
  </head>
  <body>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>

Ordered lists

“Ordered lists” indicate that order matters for that content section:

List item 1
List item 2
List item 3

Ordered lists should be coded using the <ol> tag, and each listed item should be within a <li> tag.

See the <ol> and <li> tags on lines 7 through 11 below:

<!doctype html>
 <html lang="en-US">
   <head>
     <title>Meaningful HTML Markup - Web Accessibility Top Ten - UITS</title>
   </head>
   <body>
     <ol>
       <li>List item 1</li>
       <li>List item 2</li>
       <li>List item 3</li>
     </ol>
   </body>
 </html>

Definition lists

Groups of terms that are each paired with a definition or description are called “definition lists.”

Term 1: Sample Definition
Term 2: Sample Definition
Term 3: Sample Definition

Definition lists should be coded using the <dl> tag. Each listed term should be within a <dt> tag, and each definition should be within a <dd> tag.

See the <dl> and <dt> tags on lines 7 through 14 below:

  <!doctype html>
  <html lang="en-US">
    <head>
      <title>Meaningful HTML Markup - Web Accessibility Top Ten - UITS</title>
    </head>
    <body>
     <dl>
        <dt><strong>Term 1</strong></dt>
        <dd>Sample Definition</dd>
        <dt><strong>Term 2</strong></dt>
        <dd>Sample Definition</dd>
        <dt><strong>Term 3</strong></dt>
        <dd>Sample Definition<strong></strong></dd>
     </dl>
    </body>
  </html>

Block quotes

Block quotes indicate that the presented text is a quotation from another source. These are often misused for visual styling and should be strictly applied to block quotes.

Block quotes should be coded using the <blockquote> tag.

See the <blockquote> tag on line 7 below:

  <!doctype html>
  <html lang="en-US">
    <head>
      <title>Meaningful HTML Markup - Web Accessibility Top Ten - UITS</title>
    </head>
    <body>
      <blockquote><em>Sample quotation</em></blockquote>
    </body>
  </html>

Data tables

Data tables should be used only for tabular data. All tables should include titles for rows and/or columns, with zero empty rows or columns.

Data tables should be coded using the <table> tag. Column headers should be coded using the <th scope="col"> tag. Row headers should be coded using the <th scope="row"> tag.

See the <th> tags on lines 9, 10, 11, 13, and 18 below:

<!doctype html>
<html lang="en-US">
  <head>
    <title>Meaningful HTML Markup - Web Accessibility Top Ten - UITS</title>
  </head>
  <body>
    <table>
      <tr>
          <td>&nbsp;</td>
          <th scope="col">Column Header 1</th>
          <th scope="col">Column Header 2</th>
      </tr>
      <tr>
          <th scope="row">Row Header 1</th>
          <td>Data 1</td>
          <td>Data 2</td>
      </tr>
      <tr>
          <th scope="row">Row Header 2</th>
          <td>Data 3</td>
          <td>Data 4</td>
      </tr>
    </table>
  </body>
</html>

Best practices

Check that any groups of content that are essentially lists are coded as lists
Eliminate any <blockquote> tags used for visual styling
Insert headers for all rows and/or columns within tables
Verify there are no empty lists, empty items in lists, or lists that contain only one item

Checking for correct usage

If any content is presented like a list, format it appropriately, including the use of list tags.
All quoted material should be in <blockquote> tags.
Confirm that all visual table headers are also coded using the <th> tag.

Relevant standards

WCAG 2.0 SC 1.3.1 - Info and Relationships
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)

WCAG 2.0 SC 1.3.2 - Meaningful Sequence
When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. (Level A)