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>