Lists

HTML Lists Summary

HTML lists group related items so the browser understands they belong together as a set.

<ul>
	<li>Plan the page</li>
	<li>Write the HTML</li>
	<li>Test the result</li>
</ul>

A list is made from a list container and list items. The container says what kind of list it is. Each <li> element holds one item.

Unordered Lists

An unordered list uses <ul>. Use it when the items belong together but do not need to be completed in a specific order.

<ul>
	<li>Apples</li>
	<li>Bananas</li>
	<li>Oranges</li>
</ul>

Browsers usually show unordered lists with bullets by default. CSS can change how those bullets look.

Ordered Lists

An ordered list uses <ol>. Use it when the order matters, such as steps in instructions or ranked items.

<ol>
	<li>Open the file</li>
	<li>Edit the heading</li>
	<li>Refresh the browser</li>
</ol>

Browsers usually show ordered lists with numbers by default.

List Items Belong Inside Lists

A <li> element should be placed inside a <ul> or <ol>. This nesting tells the browser which items belong to the same list.

<ul>
	<li>One item</li>
	<li>Another item</li>
</ul>

Lists are block elements, so they create a visible group in the page flow.