Skip to Main Content or Page Contents

HTML Tutorial 8. Lists

Unordered Lists, Ordered Lists and Definition Lists: Tags <ul>, <li>, <ol>, <dl>

Results per page:

Match: any search words all search words

Page Contents- Unordered List

Unordered Lists    <ul>

Simple Unordered List

Change Default Unordered Lists from a disc to a square.

Nested Unordered List

Unordered List Used as a Menu Example 4.

On Other Pages

HTML Lists Introduction

Ordered Lists       <ol>

Description Lists  <dl>

Unordered List: <ul><li> Tags

The <ul> tag works in conjunction with the line <li> tag

Example Simple Unordered List

  • one
  • two
  • three
  • etc.

Code for Simple Unordered List

<ul>
   <li>one</li>
   <li>two</li>
   <li>three</li>
   <li>etc.</li>
</ul>

<ul> The ul element is the container for the entire

<li> The li element is used for each line of the list

By default Unordered Lists

  • Produces a list where each line starts with a Disc which looks like a filled in circle
  • The list lines are placed vertically.

See the result of the above Simple Unordered List

Example of Nested Unordered List



<ul>
  <li>List Item 1</li>
  <li>List Item 2   <!-- closing </li> is moved below -->

    <ul>
      <li>nested List Item 2a  <!-- closing </li> is moved below -->

        <ul>
          <li>double nested List Item 2b</li>
        </ul>

       </li>  <!-- for nested List Item 2a -->
     </ul>

   </li>      <!-- for List Item 2 -->
 <li>List Item 3</li>
</ul>

See the result of the above Nested Unordered List

  • You can nest lists, this indents the nested portion(s) of the list.

The nested portion constisting of:

a <ul>opening tag

One or more <li> tags and contents </li>

</ul>closing tag

is inserted inside the <li> & </li> tags therefore the closing </li> is placed after the nested portion

 

 

Nested Unordered Lists are slightly tricky to do. Double Nested Lists even trickier.

The nested portion(s) of the list are indented

A nested list with it's own start <ul> & end ul </ul> along with it's list of <li>(s)s

E.g.

<ul>

  <li>double nested List Item 2b</li>

</ul>

is placed immediatly before the closing </li>

Many of the editors will do the nesting for you see the editors instructions

 

 

 

 

 

 

 

Change Default Unordered Lists from a disc to a square


Code for Disc to a Square

<ul style="list-style-type:square;">
   <li>one</li>
   <li> two </li>
   <li>three</li>
   <li>etc.</li>
</ul>

View Result

 

Nested Unordered List Code

<ul>
  <li>one
     <ul>
        <li>two
           <ul>
              <li>three</li>
           </ul>
        </li>   <!-- Closing li tag for two -->
     </ul>
  </li>   <!-- Closing li tag for one -->
  <li>etc.</li>
</ul>

Double check the location of the closing </li> tags

Indenting the code helps. The opening & closing tags should line up vertically

Unordered List Used as a Menu Example 4

Example 4. Result

In our Tutorial 11 Menus

  1. We combine the Unordered List with CSS to produce Vertical or Horizontal Navbar Menus
  2. We combine Nested unordered List and CSS to produce dropdown Navbar Menu (Similar to the main menu, Starting with Home | Lessons | etc at the top of this Page)
  3. We combine Nested unordered List and CSS to produce Flyout Navbar Menu