the web workshop

You can create bulleted or numbered lists just as you can in a Word document.

The Unordered element (ul) is used to create a bulleted list.

The Ordered element (ol) is used to create a numbered list.

Each item in the list must be contained in a list element (li).

All of these elements are block elements and therefore must have an opening and closing tag.

An unordered list will look like this:

<ul>
 <li>item 1</li>
 <li>item 2</li>
 <li>item 3</li>
 <li>item 4</li>
 <li>item 5 </li>
</ul>

An ordered list will look like this:

<ol>
 <li>item 1</li>
 <li>item 2</li>
 <li>item 3</li>
 <li>item 4</li>
 <li>item 5 </li>
</ol>

 

feetSteps to Success

  1. Open index.html in Notepad
  2. Create an ordered list of animals
    Add the following code:
    <p>These are five of my favorite animals:</p>

    <ol>
      <li>dog</li>
      <li>cat</li>
      <li>mouse</li>
      <li>snake</li>
      <li>hippo</li>
    </ol>

    <p>These are household items:</p>

    <ul>
      <li>chair</li>
      <li>stove</li>
      <li>bed</li>
      <li>TV</li>
      <li>computer</li>
    </ul>
  3. Save, and preview in a browser to see the results.
    You will see an ordered list of five animals and a bulleted list of household items.
    lists

Lists as Containers for Navigation

Lists are great containers for creating navigation. When combined with CSS (which we will discover in a couple of weeks), they create an easy to maintain and interactive navigation.

View the page source of this page (see demo on how to view page source).
The side navigation is created with an unordered list element.
lists

 

This workshop is brought to you by jdwwebdesign.com

Please feel free to contact us with any comments and/or concerns about this workshop