Content Structure

in Page Structure Tutorial

Mark up website content semantically, so that the website is extensible. Valid semantics create content that is reusable and more meaningful to assistive technologies.

Articles

The HTML5 <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.

Sections

The HTML5 <section> element marks a general region of a web page or an article. It is used for thematic grouping of content.

Paragraphs

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.

Lists

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.

Unordered list

The unordered list consists of one <ul> element and multiple list item (<li>) elements:

Ordered list

The ordered list consists of one <ol> element and multiple list item (<li>) elements:

Code Snippet

<ol>
    <li>Cook beans for 45 minutes.</li>
    <li>Cut vegetables in small cubes.</li>
    <li>Sauté onions and garlic.</li>
    <li>Deglaze using the tomatoes.</li>
    <li>Add corn and beans.</li>
    …
</ol>

Nested lists

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.

Code Snippet

<ol>
    <li>
        Prepare ingredients
        <ul>
            <li>Cook beans for 45 minutes.</li>
            <li>Cut vegetables in small cubes.</li>
        </ul>
    </li>
    <li>Sauté onions and garlic.</li>
    <li>Deglaze using the tomatoes.</li>
    <li>Add corn and beans.</li>
    …
</ol>

Description lists

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 <dd> elements).

A grouping begins either on the first item of the list or whenever a <dt> element follows an <dd> element.

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.

Code Snippet

<dl>
   <dt lang="en-US"><dfn>color</dfn></dt>
   <dt lang="en-GB"><dfn>colour</dfn></dt>
   <dd>A sensation which (in humans) derives from the ability of the fine structure of the eye to distinguish three differently filtered analyses of a view.</dd>
</dl>

Multiple terms, multiple descriptions

In this example, John and Luke are authors and also editors:

Quotes

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

Use the <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.

Code Snippet

<p>The following is an excerpt from the <cite>The Story of my Life</cite> by Helen Keller</p>
<blockquote>
    <p>Even in the days before my teacher came, I used to feel along the square stiff boxwood hedges, and, guided by the sense of smell, would find the first violets and lilies. There, too, after a fit of temper, I went to find comfort and to hide my hot face in the cool leaves and grass.</p>
</blockquote>

Inline quote

For shorter quotes, that are usually embedded in another sentence, use the <q> element.

Figures

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 <figcaption> element.

Code Snippet

<p>The sales volume of our SpaceBear product was steadily the first three quarters but had a huge success in quarter four with the introduction of SuperBear in time for the holiday season. See graphic G3 for details.</p>

<figure role="group" aria-labelledby="fig-t3-capt">
    <figcaption id="fig-t3-capt">G3: SpaceBear sales volume</figcaption>
    <img src="…"
         alt="SpaceBear sales diagram, showing the huge success in Q4"
         longdesc="…">
    <a href="…">Long Description</a>
</figure>

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.

Tables

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.