HTML Lists

Lists

List Tags, Ordered and Unordered

Lists are a very convenient way to make your webpages look neat and tidy. There are unordered lists and ordered lists and they embed easily when you put a list inside a list. The list tags contain list item tags which are placed in between the list tags. I have included list-item endtags, but I have a feeling they are optional.

unordered list tag - <ul> </ul>
ordered list tag - <ol> </ol>
list item - <li> </li>
type attribute - type="list type" - <ol> type="A" </ol>

A good coding principle would be to indent your list tags and then further indent your list items on a new-line. Clearly idented code makes it easy to find mistakes and make changes. Here is a table with some sample lists and the corresponding coding requirements.

You can use the code from the table to create your own lists by copying it into a text editor, or copying code from View-Page Source.

screwdrivers

knitting needles

juggling balls

<ul>
<li> screwdrivers </li>
<li> knitting needles </li>
<li> juggling balls </li>
</ul>

screwdrivers

knitting needles

juggling balls

<ol>

<li> screwdrivers </li>
<li> knitting needles </li>
<li> juggling balls </li>

</ol>

screwdrivers

knitting needles

juggling balls

<ol type="a">
<li> screwdrivers </li>
<li> knitting needles </li>
<li> juggling balls </li>
</ol>

screwdrivers

knitting needles

juggling balls

<ol type="A">
<li> screwdrivers </li>
<li> knitting needles </li>
<li> juggling balls </li>
</ol>

screwdrivers

knitting needles

juggling balls

<ol type="i">
<li> screwdrivers </li>
<li> knitting needles </li>
<li> juggling balls </li>
</ol>

screwdrivers

knitting needles

juggling balls

<ol type="I">
<li> screwdrivers </li>
<li> knitting needles </li>
<li> juggling balls </li>
</ol>

screwdrivers

knitting needles

juggling balls

screwdrivers

knitting needles

juggling balls

<ul>
<li> screwdrivers </li>
<li> knitting needles </li>
<li> juggling balls </li>

<ul>
<li> screwdrivers </li>
<li> knitting needles </li>
<li> juggling balls </li>
</ul>

</ul>

screwdrivers

screwdrivers

knitting needles

juggling balls

knitting needles

juggling balls

<ol type="I">

<li> screwdrivers </li>
<ol type="A">

<li> screwdrivers </li>
<li> knitting needles </li>
<li> juggling balls </li>
</ol>
<li> knitting needles </li>
<li> juggling balls </li>
</ol>

screwdrivers knitting needles juggling balls	<ul> <li> screwdrivers </li> <li> knitting needles </li> <li> juggling balls </li> </ul>
screwdrivers knitting needles juggling balls	<ol> <li> screwdrivers </li> <li> knitting needles </li> <li> juggling balls </li> </ol>
screwdrivers knitting needles juggling balls	<ol type="a"> <li> screwdrivers </li> <li> knitting needles </li> <li> juggling balls </li> </ol>
screwdrivers knitting needles juggling balls	<ol type="A"> <li> screwdrivers </li> <li> knitting needles </li> <li> juggling balls </li> </ol>
screwdrivers knitting needles juggling balls	<ol type="i"> <li> screwdrivers </li> <li> knitting needles </li> <li> juggling balls </li> </ol>
screwdrivers knitting needles juggling balls	<ol type="I"> <li> screwdrivers </li> <li> knitting needles </li> <li> juggling balls </li> </ol>
screwdrivers knitting needles juggling balls screwdrivers knitting needles juggling balls	<ul> <li> screwdrivers </li> <li> knitting needles </li> <li> juggling balls </li> <ul> <li> screwdrivers </li> <li> knitting needles </li> <li> juggling balls </li> </ul> </ul>
screwdrivers screwdrivers knitting needles juggling balls knitting needles juggling balls	<ol type="I"> <li> screwdrivers </li> <ol type="A"> <li> screwdrivers </li> <li> knitting needles </li> <li> juggling balls </li> </ol> <li> knitting needles </li> <li> juggling balls </li> </ol>