Mark up website content semantically, so that the website is extensible. Valid semantics create content that is reusable and more meaningful to assistive technologies.
<article> element represents a complete or self-contained composition in a web page. Examples of articles include an item at a shopping site or a news article on a news site.
<section> element marks a general region of a web page or an article. It is used for thematic grouping of content.
Use the paragraph element (
<p>) to mark up paragraphs of text, such as this one. The consistent styling of paragraphs improves text readability. It also gives users more control when customizing their view.
Use different types of lists to group information according to its nature to provide orientation for users.
- Unordered lists are used when the order of the items is not relevant. List items in unordered lists are marked with a bullet.
- Ordered lists are used for sequential information and are automatically enumerated by the browser.
- Description lists are groups of related terms and descriptions which are connected programmatically.
Individual list items can contain a variety of HTML elements, including paragraphs, headings, form elements, and other (nested) lists.
The unordered list consists of one
<ul> element and multiple list item (
The ordered list consists of one
<ol> element and multiple list item (
Every list can be nested into another list. In the following example, the order of preparation is not critical, but the preparation itself should be done before using the ingredients. The information is still easy to digest, assistive technology can easily inform users about the number of steps.
A description list consists of one or more term and description groupings. Each grouping associates one or more terms (the contents of
<dt> elements) with one or more descriptions (the contents of
A grouping begins either on the first item of the list or whenever a
<dt> element follows an
One term, multiple descriptions
In the following example, John and Luke are described as authors, and Frank is described as editor.
Multiple terms, one description
In the next example, two different spellings of a word are defined using description lists. In such cases, use the
dfn element to mark up the defined term.
Multiple terms, multiple descriptions
In this example, John and Luke are authors and also editors:
Identifying a quotation helps clarify that the content is attributed to another author. Quotes can be marked up as inline or as blocks of text. Assistive technologies can convey to users where a quote starts and ends, which can avoid misunderstandings.
<blockquote> element for longer and more complex quotes. It can contain paragraphs, headings, and other text structure elements. Those should reflect the structure of the cited document. The
<cite> element is used to refer to the source of the quote.
For shorter quotes, that are usually embedded in another sentence, use the
Figures are blocks with additional information set off from the main content of the page – sometimes referenced from the main text. They typically contain lists, images, tables, but can also include other content. For example, an annual report could reference to a diagram containing the sales volumes of a product.
Each figure is wrapped in a
<figure> element and labeled using a nested
Note: At the time of writing, WAI-ARIA attributes
aria-labelledbyare used to provide the information to assistive technologies in a consistent way.
Note: For more information on how to mark up diagrams, see complex images.
Images and illustrations
Images and illustrations are useful to create visual engagement for many users. They may also clarify text for people with reading disabilities. Where images or illustrations are used, proper alternative text needs to be added. See the Images Tutorial for guidance on alternative text.
Data tables provide a useful way to display the data so that the structure of the table can be communicated to everyone. Proper table layout allows people to understand meaningful data relationships without seeing the grid. For more details, see the Tables Tutorial.
Related WCAG resources
These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG success criteria and techniques from different conformance levels:
1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)