A Beginner's Tutorial to HTML - Lesson 6 Unordered, Ordered and Definition Lists offers a step-by-step how-to guide for creating these three different types of lists!
A Beginner's Tutorial to HTML - Lesson 6 Unordered, Ordered and Definition Lists offers a step-by-step how-to guide for creating these three different types of lists!
{short description of image}

HTML Tutorial:
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
 
html tutorial
Garvick Com

A Beginner's Tutorial to HTML

Lesson 6
Unordered, Ordered and Definition Lists

 

Unordered List:


Unordered Lists <ul>, <li>, </ul> will create a bulleted list. The tag can also include the attributes <ul type=disc|circle|square> (disc being the default), depending on what type of bullet you want. The end tag </ul> for the list is only required at the end of the list itself, not at the end of each individual item. To nest one list within another list, just place the <ul>, <li>, </ul> within the main list. 

This is what the code would look like: 

<ul> 
<li> ordered list 
<li> unordered list 
 <ul> 
    <li> uses bullets 
    <li> can be nested 
 </ul> 
<li> definition list 

This is what it would look like in the browser: 

  • ordered list
  • unordered list
  • uses bullets
  • can be nested
  • definition list

Ordered List:

Ordered List <ol>, <li>, </ol> will create an alphabetical or numerical list (numerical is the default).

The tag can also include the attributes <ol type=1 | A | a | I | i>, which specifies numbers, uppercase letters, lowercase letters, uppercase roman numerals and lowercase roman numerals, respectively. You can also start the list at any number you choose by using the <start=n> attribute, where "n" is the number you wish to start the list with. Ordered lists can be nested the same way as unordered lists. 

This is what the code would look like: 

<ol type=1 start=5>
<li> ordered list
 <ol type=a>
     <li> uses letters
     <li> uses numbers
 </ol>
<li> unordered list
<li> definition list</li>
</ol>

This is how it would look in the browser: 
  

  1. ordered list
  1. uses letters
  2. uses numbers
  • unordered list
  • definition list

Definition List:

  • Definition List <dl>, <dt>, <dd>, </dl> 
    A definition list is a list of terms and corresponding definitions. 
  • This is what the code would look like: 
    <dl>
    <dt> Definition List

    <dd> A Definition List is a list of terms and corresponding definitions.
    <dt> Definition Term
    <dd> A Definition Term is flush against the margin.
    <dt> Definition Define
    <dd> Definition Define is indented.
    </dl>

    This is how it would look in the browser: 

     Definition List 

    A Definition List is a list of terms and corresponding definitions.
    Definition Term
    A Definition Term is flush against the margin.
    Definition Define
    Definition Define is indented.
     

|  Lesson 1 (Learning the Basics) | Lesson 2 (Adding Color)  | Lesson 3 (Formatting Documents) |
Lesson 4 (Graphics) |  Lesson 5 (Linking Text & Graphics) |  Lesson 6 (Lists) |
| Lesson 7 (Tables) | Back to HTML Tutorial |

 

Garvick Home | Free Recipes | Shopping Mall | Annual Events | Vancouver BC

 

Site Map | Garvick's Privacy Policy