Carousel Structure

Structural markup ensures that the content of a carousel can be used in a variety of situations. For example, a carousel with proper markup could be presented as a list of articles on a mobile device.

General Structure

As a collection of content items, carousels are typically best represented as unordered lists, using <ul> and <li>. Depending on the context, other elements can also be used.

Every carousel should be enclosed in a labeled region, to allow users to find the carousel easily. In the following example, a <section> element is used to define the region and aria-labelledby defines the heading that contains the label.

Editor’s Note The following paragraph was show in a side column before.
See the Page Structure Tutorial for more information on regions and labels.

Editor’s Note The following paragraph was show in a side column before.
A working demo example for this code is available.

Carousel items

Carousels are often used as a gallery to display a series of images. However, more complex content, such as teasers, articles, or entire sections of web pages can also be shown inside carousels. In all cases, use appropriate markup to ensure that the structure and meaning of the content are conveyed clearly. Such markup may include headings, sections, lists, articles, and other elements as needed.

This first example shows a carousel item with images as content:

This example of an article that includes a heading and a paragraph shows how more complex content can be used.