Lists

There are three different types of HTML lists: ordered lists, unordered lists, and definition lists.

Ordered Lists: numbered 1 to 10 (or higher in decimal), or I to X (or higher in Roman numerals) or A to Z... By default, ordered lists will be numbered 1, 2, 3, 4... Use the style="list-style:xxx" attribute to set the xxx value to upper-alpha, lower-alpha, upper-roman, lower-roman, ...

Unordered Lists: presented with bullets, circles, squares, or small images preceding them. By default, unordered lists will be preceded by bulleted dots.

Definition Lists: allow you to list the term to be defined on one line, and an indented definition of the term on the next line.

This short exercise will show you how to quickly write and edit HTML lists.

Note: If you have an Apple Mac, you may use TextEdit instead.

Ordered Lists

1. Click Start > All Programs > Accessories > Notepad.

2. Highlight, copy, and paste the code shown below into Notepad:
<ol>
  <li>Numbered List Item 1</li> 
  <li>Numbered List Item 2</li>
  <li>Numbered List Item 3</li>
</ol>


<ol style="list-style-type:lower-roman">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

3. Follow the pattern above and create another ordered list that will display the following:
A. Apples
B. Bananas
C. Carrots
D. Dates

Unordered lists

1. Open a new Notepad document.

2. Highlight, copy, and paste the unordered list code shown below into Notepad:
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
Notice how the default list-style type is a disc, sometimes called a bullet.

3. Highlight, copy, and paste the unordered list code shown below into Notepad:
<ul style="list-style:square">
     <li>List item 1 - square</li>
     <li>List item 2 - square</li>
   <ul style="list-style:circle">
     <li>List item 3 - circle</li>
     <li>List item 4 - circle</li>
   </ul>
</ul>

Notice how the list-style types (square and circle) are specified. Also note how these two unordered lists above are nested.

4. Highlight, copy, and paste the unordered list code shown below into Notepad:
<ul style="list-style-image:url(images/point.gif)">
<li>First Item - image</li>
<li>Next Item - image</li>
</ul>

5. Download or create an image to use as the list-style image and place it into an images folder to create an unordered list preceded by an image.

6. Save your file as UnorderedList.htm and view it in the browser. It will look similar to the screen capture below:

Click here to see this sample web page live (then right-click > View Source for code)

Unordered Lists are commonly used with the <nav> tag element to facilitate responsive web designs for mobile devices, tablets and desktop PCs. The code below will produce a simple responsive navigation displaying vertical block navigation for smartphones and horizontal inline navigation display for larger screens. It uses a media query in the stylesheet.

In the stylesheet, give attributes for mobile devices first, then tablets, then desktop PCs.

<head>
<style>
nav {width:100%; text-align:center}
nav a {display:block; width:20%}
nav li {list-style:none}
nav li a {border:2px #AAA solid; padding:6px}
@media only screen and (min-width:640px){
nav a {display:inline}
nav li {display:inline; padding:0 18px}
} /* Close 640 Media Query for tablets and desktop PCs */
</style>
</head>
In the body:
<nav>
<ul>
    <li><a href="index.htm">Home</a></li>
    <li><a href="resume.htm">Resume</a></li>
    <li><a href="contact.htm">Contact</a></li>
</ul>
</nav>

Finally, as mentioned earlier, a Definition List can display the term to be defined on one line, and an indented definition of the term on the next line. See below:
<dl>
  <dt>.GIF</dt>
    <dd>Usually drawings up to 256 colors. Also used for simple animations.</dd>
  <dt>.JPEG</dt>
    <dd>The most common compression method for photos. Up to 16 million colors.</dd>
</dl>

The code above produces the output below:

.GIF: Usually drawings up to 256 colors. Also used for simple animations.
.JPEG: The most common compression method for photos. Up to 16 million colors.

Feel free to play and experiment with more list variations.

For more HTML code samples see: www.w3schools.com
For other resources and tutorials see: quackit.com and htmlquick.com
ValidateValidate

Validation checks the syntax of your file, looking for both errors and possible issues when viewing your page in a browser. Some of the problems reported are missing end tags, missing characters, invalid attributes, incorrect nesting of elements... your file, see: http://validator.w3.org

Review Assignment Learning Project: 10 Practice Review Steps