Marketing for Libraries Logo

HTML Section: Lists

Endless paragraphs of information can be overwhelming for readers. Consider breaking up information into lists.

HTML Lists

You can create unordered lists (marked with bullets) and ordered lists (marked with numbers or letter). You can also create definition lists.

Unordered Lists

An unordered list begins with the <ul> tag. Each item on the list starts with the <li> tag. Note that each start tag has a matching end tag. The default is to use a bullet at the beginning of each line, but you can indicate the type as a disc, circle, or square also.

If you want to change the type of dingbat or symbol use type and the particular symbol such as type="circle" between the start and end tag of the item.

You can also choose where to start such as <ol start="10">

You can also force a particular item to have a specific value such as <li value="3">

A fun thing to try is customized icons. For this, you need to indicate the graphic you wish to use instead of the bullet symbol. This can be set in your style sheet.

Examine the following sample code.

<ul>
<li>Cats</li>
<li>Dogs</li>
<li>Lizards</li>
<li>Fish</li>
</ul>

Ordered Lists

An ordered list begins with the <ol> tag. Each item on the list starts with the <li> tag. Note that each start tag has a matching end tag. The default is to number the list.

If you want to change the type of number/letter system use type and the particular symbol such as type="A" between the start and end tag of the item.

Examine the following sample code.

<ul>
<li>Cats</li>
<li>Dogs</li>
<li>Lizards</li>
<li>Fish</li>
</ul>

  1. Cats
  2. Dogs
  3. Lizards
  4. Fish

Definition Lists

A definition list is begins with the <dl> tag. Each terms uses the <dt> tag and each description uses to <dd> tag.

Examine the following sample code.

<dl>
<dt>Cat</dt>
<dd>a small domesticated carnivorous mammal with fur, a short snout, and claws</dd>
<dt>Dog</dt>
<dd>a domesticated carnivorous mammal with a long snout, acute sense of smell, and bark</dd>
</dl>

Cat
a small domesticated carnivorous mammal with fur, a short snout, and claws
Dog
a domesticated carnivorous mammal with a long snout, acute sense of smell, and bark

Nested Lists

In many cases, you'll need to create lists within lists. It's easy to get confused. Just remember that every start tag needs a matching end tag.

Examine the following sample code.

<ul>
<li>Cat</li>
<li>Dog
<ul>
<li>beagle</li>
<li>collie</li>
</ul>
</li>
<li>Fish</li>
</ul>

try itTry It!
Go to w3schools and read about Lists.
Use the Try It Yourself buttons to practice coding.

CSS Lists

Use the list-style-type property to indicate the shape or type of numbering or lettering system.

Examine the sample below:

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

You can also use a visual as a marker.

ul {list-style-image: url('redcircle.gif'); }

try itTry It!
Go to w3schools and read about the CSS List.
Use the Try It Yourself buttons to practice coding.

 


| eduScapes | IUPUI Online Courses | Teacher Tap | 42eXplore | About Us | Contact Us | © 2006-2013 Annette Lamb & Larry Johnson