Creating lists in HTML

Creating lists in HTML

Lists are a commonly used way of displaying items such as shopping, tasks or in the index of a book. HTML provided three tags for the different types of lists. There are two types of lists, an unordered list, which indents each item in the list and adds a bullet, and an ordered list, which indents and numbers each item. To create a list, you will use the tags <ul> . . . </ul> to create an unordered list and the tags <ol> . . . </ol> to create an ordered list. Each item in the list will be enclosed by the tags <li> . . . </li>

Unordered List

Example of an <ul> tag

<ul type="disc"> 
<li>Tutorials</li>
<li>Online Practice Editor</li>
<li>Examples</li>
        <li>References</li>
        <li>Videos</li> 
</ul>



The <ul> tag stands for Unordered List and items are displayed as a bullet point list.  You can see that there is a single <ul> tag enclosing a number of <li> tags - one for each List Item. You can change the displayed bullet from the filled circle using the type attribute. An example of this can be seen above highlighted in blue. 

Ordered List

<ol type="A">

<li>Chapter 1</li>

<li>Chapter 2</li>

<li>Chapter 3</li>

</ol>

The <ol> tag stands for Ordered List and items are displayed as a numbered list. from the example above you are able to see that there is a single <ol> tag enclosing a number of <li> tags - one for each List Item. The numbers can be changed using the same type attribute we saw above. This is useful for nested lists where we want different numbering systems for different sub-lists. As with the unordered list the user is able to change the displayed from numbers to alphabetical letters using the type attribute, this can be seen highlighted  in blue.