You can create bulleted or numbered lists just as you can in a Word document.
The Unordered element (ul) is used to create a bulleted list.
The Ordered element (ol) is used to create a numbered list.
Each item in the list must be contained in a list element (li).
All of these elements are block elements and therefore must have an opening and closing tag.
An unordered list will look like this:
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5 </li>
</ul>
An ordered list will look like this:
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5 </li>
</ol>
Steps to Success
- Open index.html in Notepad
- Create an ordered list of animals
Add the following code:
<p>These are five of my favorite animals:</p>
<ol>
<li>dog</li>
<li>cat</li>
<li>mouse</li>
<li>snake</li>
<li>hippo</li>
</ol>
<p>These are household items:</p>
<ul>
<li>chair</li>
<li>stove</li>
<li>bed</li>
<li>TV</li>
<li>computer</li>
</ul> - Save, and preview in a browser to see the results.
You will see an ordered list of five animals and a bulleted list of household items.
Lists as Containers for Navigation
Lists are great containers for creating navigation. When combined with CSS (which we will discover in a couple of weeks), they create an easy to maintain and interactive navigation.
View the page source of this page (see demo on how to view page source).
The side navigation is created with an unordered list element.
