Lists
Often, when creating web content, we look for ways to organize information to make it more readable. One way to organize text is in lists. There are two types of lists: ordered (numbered, lettered, etc) and unordered (bulleted). To create an ordered list, we use the <ol> tag. To create an unordered list, we use the <ul> tag. Each of these tags require a closing and we will be placing tags inside of them. Inside of each of these list types, we will create list items (<li>). Depending on the list type (ul / ol), each list item generates the necessary list header (the number, letter or bullet).
Create an ordered list of tasks:
<![CDATA[<ol>
<li>First task</li>
<li>Second task</li>
<li>Third task</li>
</ol>]]>
Create an unordered list of favorite songs:
<![CDATA[<ul>
<li>Song 1</li>
<li>Song 2</li>
<li>Song 3</li>
</ul>]]>
List appearances can be altered using styles. The 'list-style' css property allows a variety of list styles to be implemented. Some of the options include:
- disc - a filled in circle for unordered lists
- circle - an empty circle for unordered lists
- square - a solid square for unordered lists
- decimal - a number starting at one for ordered lists
- decimal-leading-zero - numbers with leading zeros for ordered lists
- lower-alpha - lowercase letters for ordered lists
- upper-alpha - uppercase letters for ordered lists
- lower-roman - lowercase roman numerals for ordered lists
- upper-roman - uppercase roman numberals for ordered lists
Finally, when lists are nested in each other, they automatically indent and take on outline type characteristics. For example, the code:
<![CDATA[<ol>
<li>Item 1</li>
<ol style='list-style:lower-alpha'>
<li>Item 1-1</li>
<li>Item 1-2</li>
</ol>
</ol>]]>
produces the following ouput:
- Item 1
- Item 1-1
- Item 1-2