Content Structure

in Page Structure Tutorial


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.


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

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:

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.

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.

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.


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.

Inline quote

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


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.

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.

Back to Top