Content Structure
Status: This is not ready for detailed review. It is an in-progress, unapproved editor’s draft.
Beside headings, there are a lot of possibilities to structure texts so they can be consumed more easily.
Paragraphs
The most simple form of text structuring is to write texts in paragraphs, adding rhythm and lightness to the page. The paragraph element (<p>
) should be used, as it can be styled in a consistent way and also can be used to change the display by assistive technologies.
Lists
There are ordered and unordered lists in HTML. Use ordered lists if the list needs to be read and done in order, for example how to prepare a meal. They are enumerated automatically by the browser. In an unordered list the order does not matter, for example on an ingredients list, the order buying the ingredients is not relevant. Every list item in unordered lists is marked with a bullet. Both types of lists provide orientation for the user.
List items can contain all kinds of different HTML elements, including paragraphs, headings, and form elements.
Unordered list
The unordered list consists of one <ul>
element and multiple list item (<li>
) elements:
Ordered list
The unordered list consists of one <ol>
element and multiple list item (<li>
) elements:
Nested lists
Every list can be nested into another list. In this example, the order of preparation is not important, but it should be done before using them. The information is still easy to digest, assistive technology can inform users about the number of steps easily.
Definition lists
To provide definitions for one word, definition lists (<dl>
) can be used. They are different to (un)ordered lists as they don’t use <li>
elements to mark up list items but <dt>
(definition term) and <dd>
(definition description) elements. Each term is put into one <dt>
element, its definition goes in the <dd>
element directly following it.
Definition lists are typically used in a glossary and are easiest to use when the definitions are put in alphabetical order.
Quotes
Marking up quotes in text is often important to interpret text correctly.
Blockquote
For larger quotes, the <blockquote>
element should be used. It can contain paragraphs, headings, and other text structure elements. The <cite>
element can be used to refer to the source of the quote.
Inline quote
For shorter inline quotes, the <q>
element should be used.
Note: In older browsers adding quotes automatically wasn’t well supported. If such a browser is to be supported, consider adding quotes to the text manually and removing generated quotes in modern browsers:
Figures
Figures are an addition to HTML5 that allows to add captions to lists, images, tables, and other content that is related to the main text but should be only referenced from there. For example an annual report could reference to table T3, which contains the sales volumes of a product. It allows users to dive deeper in the data or to skip it. The related content is wrapped in a <figure>
element, a <figcaption>
element is added that has the description of the content.
At the time of writing, WAI-ARIA attributes role="group"
and aria-labelledby
are used to provide the information to assistive technologies in a consistent way.
Images and illustrations
Using images and illustrations in the text can help guiding users, especially in long texts. They can also help to clarify the text for people with reading disabilities. If images or illustrations are used, proper alternative texts need to be added. See the Images Tutorial for more information on images.