Lists in HTML

My last post did not get into lists, but this is a good category to learn on its own. Lists consist of two types of tags working together. The first tag you need to know is the <ul> or <ol> tags, and their closing companions, </ul> and </ol>. These tags are wrapped around the list, and are different in the type of list they represent. <ul> is for “unordered list”, like a bulleted list, and <ol> is for “ordered list,” where html will provide a numbered list of your items.

In order to specify the list items, they are wrapped in <li> </li>, for “list item”. The finished code for an ordinary list with a heading might look like this:

<h2>Shopping List</h2>
<ul>
<li> bananas</li>
<li>tomatoes</li>
<li>cereal</li>
<li>rice</li>
<li>dog treats</li>
</ul>

Displayed as:


Shopping List

  • bananas
  • tomatoes
  • cereal
  • rice
  • dog treats

Now an ordered list:

<h2>Shopping List</h2>
<ol>
<li> bananas</li>
<li>tomatoes</li>
<li>cereal</li>
<li>rice</li>
<li>dog treats</li>
</ol>

Displayed as:


Shopping List

  1. bananas
  2. tomatoes
  3. cereal
  4. rice
  5. dog treats

This entry was posted in HTML-CSS Lessons and tagged , , , . Bookmark the permalink.

Comments are closed.