Lists
Use lists to make blocks of text easier to read, and to break information into manageable chunks.
Note that lists that are a descendant of the <nav> element have all margins, padding and list item markers removed by default.
Unordered lists
Open this Unordered list with markers in a new tab
HTML:
<ul>
<li>Level 1 list item 1</li>
<li>Level 1 list item 2</li>
<li>Level 1 list item 3
<ul>
<li>Level 2 list item 1</li>
<li>Level 2 list item 2</li>
<li>Level 2 list item 3</li>
</ul>
</li>
<li>Level 1 list item 4</li>
<li>Level 1 list item 5</li>
<li>Level 1 list item 6</li>
</ul>Ordered lists
Open this Ordered list with markers in a new tab
HTML:
<ol>
<li>Level 1 list item 1</li>
<li>Level 1 list item 2</li>
<li>Level 1 list item 3
<ol type="a">
<li>Level 2 list item 1</li>
<li>Level 2 list item 2</li>
<li>Level 2 list item 3</li>
</ol>
</li>
<li>Level 1 list item 4</li>
<li>Level 1 list item 5</li>
<li>Level 1 list item 6</li>
</ol>Classes to modify list styles
The .clean-list class removes all margin and padding and list item markers:
Open this Unordered list without spacing and bullets in a new tab
HTML:
<ul class="clean-list">
<li>Level 1 list item 1</li>
<li>Level 1 list item 2</li>
<li>Level 1 list item 3</li>
<li>Level 1 list item 4</li>
<li>Level 1 list item 5</li>
<li>Level 1 list item 6</li>
</ul>The .nomarkers-list class removes list item markers only:
Open this Unordered list without bullets in a new tab
HTML:
<ul class="nomarkers-list">
<li>Level 1 list item 1</li>
<li>Level 1 list item 2</li>
<li>Level 1 list item 3</li>
<li>Level 1 list item 4</li>
<li>Level 1 list item 5</li>
<li>Level 1 list item 6</li>
</ul>The .noindent-list class removes padding from the leading edge of lists:
Open this Unordered list without bullets in a new tab
HTML:
<ul class="noindent-list">
<li>Level 1 list item 1</li>
<li>Level 1 list item 2</li>
<li>Level 1 list item 3</li>
<li>Level 1 list item 4</li>
<li>Level 1 list item 5</li>
<li>Level 1 list item 6</li>
</ul>Adding the .counter class to an ordered list will ensure that any nested ordered lists are displayed as decimals, with the first digit corresponding to the number of the parent list item:
Open this Ordered list with a counter in a new tab
HTML:
<ol class="counter">
<li>Level 1 list item 1</li>
<li>Level 1 list item 2</li>
<li>Level 1 list item 3
<ol>
<li>Level 2 list item 1</li>
<li>Level 2 list item 2</li>
<li>Level 2 list item 3</li>
</ol>
</li>
<li>Level 1 list item 4</li>
<li>Level 1 list item 5</li>
<li>Level 1 list item 6</li>
</ol>Considerations
The .clean-list and .nomarkers-list classes that remove list item markers also remove list semantics in Webkit browsers, as noted by Scott O'Hara. If list semantics are important for your users, add role="list" to restore them.
The .counter class supports the "start" and "reversed" attributes on the ordered list, but does not support the "type" attribute, e.g. for Roman numerals. Ordered lists with the .counter class will always use decimal numbers for the markers.
Description lists
Open this Description list in a new tab
HTML:
<dl>
<dt>Term</dt>
<dd>Description</dd>
<dt>Term</dt>
<dd>Description</dd>
<dt>Term</dt>
<dd>Description</dd>
<dt>Term</dt>
<dd>Description</dd>
</dl>Tabulated description lists
For a more tabulated style, add the .grid class to the <dl> element:
Open this Description list with grid styling in a new tab
HTML:
<dl class="grid">
<dt>Term</dt>
<dd>Description</dd>
<dt>Term</dt>
<dd>Description</dd>
<dt>Term</dt>
<dd>Description</dd>
<dt>Term</dt>
<dd>Description</dd>
</dl>Inline description lists
To align the terms and the descriptions separated with a comma, add the .inline class to the <dl> element and a <div> around the <dt>/<dd>:
Open this Inline description list in a new tab
HTML:
<dl class="inline">
<div>
<dt>Term</dt>
<dd>Description</dd>
<dd>Other description</dd>
</div>
<div>
<dt>Term</dt>
<dd>Description</dd>
<dd>Other description</dd>
</div>
<div>
<dt>Term</dt>
<dd>Description</dd>
<dd>Other description</dd>
</div>
<div>
<dt>Term</dt>
<dd>Description</dd>
<dd>Other description</dd>
</div>
</dl>