HTML Tags Tutor

Unordered List Tag

The unordered list tag is used to create lists on a web page. The code shown here produces the bulleted list on the right.

<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>

  • List Item
  • List Item
  • List Item

Lesson steps

Click the <> button to enter your code

Type or paste the code shown here for an unordered list in the editor window:

<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>

Click Preview button.

Change List Style

Click the <> button to return to the code.

Add the inline style code to the opening list tag as shown in red:

<ul style="list-style: circle">
Click Preview button.

Change List Style

Click the <> button to return to the code.

Change the style code of the opening list tag as shown in red:

<ul style="list-style: square">
Click Preview button.

Set the Font

Click the <> button to return to the code.

Change the style code of the opening list tag as shown in red:

<ul style="list-style: square; font-family: verdana">
Click Preview button.

Add Color

Click the <> button to return to the code.

Change the style code of the opening list tag as shown in red:

<ul style="list-style: square; font-family: verdana; color: #00cc00">
Click Preview button.

Lesson Notes

The unordered list tag will work if you forget the closing list item tags. For W3C compliance you should include them.

When adding inline style declarations, use a semi colon to separate them. If these same declarations were defined in the head section using the style tag the code would look like this:
<head>
<style type="text/css">
ul {
list-style: square
}

li {
font-family: verdana;
color: #00cc00
}
<style>
</head>