The HTML for them is essentially the same, too, as each comprises the same two parts:

• The list 'container'
• The list items themselves, which all live within the container

The list container

Like almost any element, list containers have opening and closing tags, as shown below.

		<ul>    </ul>					<!-- unordered list-->
		<ol>    </ol>					<!-- ordered list -->
									

The list items

Each list item also has its own opening and closing tag. They're the same for both types of list:

		<li>    </li>
									

Putting it all together – unordered and ordered lists

Putting the above together, this is what the code for an unordered list looks like.

		<ul>						<!--open unordered list 'container'-->
		 <li>	  (list item)     </li>			<!--list item-->
		 <li>	  (list item)	   </li>			<!--list item-->
		 <li>	  (list item)	   </li>			<!--list item-->
		</ul>						<!--close unordered list 'container'-->				
									

This is what the code for an ordered list looks like.

		<ol>						<!--open ordered list 'container'-->
		 <li>	  (list item)     </li>			<!--list item-->
		 <li>	  (list item)	   </li>			<!--list item-->
		 <li>	  (list item)	   </li>			<!--list item-->
		</ol>						<!--close ordered list 'container'-->				
									

---

The list container

Like the other list types, description lists have a 'container' for the list items. The HTML tags for the container are as follows:

		<dl>    </dl>					<!--description list container-->
									

List items and descriptions

Each list item is followed by its description. The HTML tags are shown below:

		<dt>    </dt>					<!--list item-->
		<dd>    </dd>					<!--description-->								
									

Putting it all together

Putting the above together, this is what the code for the description list above looks like:

		<dl>						<!--open container-->
			<dt>List item 1</dt>			<!--list item-->
			<dd>Description of list item 1</dd>	<!--description-->
			<dt>List item 2</dt>			<!--list item-->
			<dd>Description of list item 2</dd>	<!--description-->			
		</dl>						<!--close container-->						
									

---

Here's some of the things you can change (depending on the type of list, of course):

List container

• You can position it (e.g. shifting the whole list across using a margin)
• Specify the type of list marker (e.g. bullet/numbering style, a small image, none)
• Specify the list item font size, weight etc (list items inherit it from the container)
• Specify the sequence of ordered list markers
• Position the list marker in line with or to the left of the text
• Add a background colour to the list container

List items

You can style the individual list items to:

• Position or space them within the container (e.g. margins)
• Add a background colour to each item
• Specify the font size, weight etc

<ul class="nobullet">													 
 <li><a href="#">Item</a></li>
 <li><a href="#">Item</a></li>
 <li><a href="#">Item</a></li>
 <li><a href="#">Item</a></li>
</ul>
														  
<ul class="nobullet" id="horiz">													 
 <li><a href="#">Item</a></li>
 <li><a href="#">Item</a></li>
 <li><a href="#">Item</a></li>
 <li><a href="#">Item</a></li>
</ul>														  
														  

.nobullet {
 list-style-type: none;
 }
																
#horiz {
 text-align: center;
 }							
							
#horiz li{	     
 display: inline;
 margin-right: 1vw;
 margin-left: 1vw;
 }