Lists
Use lists to make blocks of text easier to read, and to break information into manageable chunks.
Bulleted lists
Open this Unordered list with bullets 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>
Numbered lists
Open this Ordered list with bullets 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>
<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>
Clean list
Adding the .clean-list
class to an unordered or ordered list will remove the list markers:
Open this Unordered list without 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>
Considerations
As noted by Scott O'Hara, the CSS used for the .clean-list
class to remove the markers also removes the list semantics in Webkit browsers. If the list semantics are important for your users, add role="list"
to restore them.
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>
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>