HTML Lists


Lists are used to group related pieces of information together, so they are clearly associated with each other and easy to read. In modern web development lists are workhorse elements, frequently used for navigation as well as general content.

Lists are good from a structural point of view as they help create a well-structured, more accessible, easy-to-maintain document.

The three list types

  • unordered list—used to group a set of related items, in no particular order.
      Types
    • circle
    • disk
    • square
  • ordered list—used to group a set of related items, in a specific order.
      Types
    • Numbers(1)
    • Upper Case(A)
    • Lower Case(a)
    • Roman Upper Case(I)
    • Roman Lower Case(i)
  • definition list—used to display name/value pairs such as terms and their definitions, or times and events.

Unordered lists

Unordered lists use one set of
*openging <ul> and closeing </ul> tag.
tags, wrapped around many sets of
<li>  </li>

Unordered lists Example

     <html> 
         <head>  
            <title>  
           Welcome to HTML Tutroial 
            </title>  
         </head>  
          <body>
         <ul> 
         <li>A</li>  
         <li>B</li>  
         <li>C</li>  
         <li>D</li>  
         </ul>        
          </body>  
      </html>

Unordered Lists - The Style Attribute

A style attribute can be added to an unordered list, to define the style of the marker:

Style Description
list-style-type:sqaure The list items will be marked with bullets (default)
list-style-type:circle The list items will be marked with circles
list-style-type:disc The list items will be marked with squares
list-style-type:none The list items will not be marked

Unordered List: Square Bullets

The bullet style of the unordered list is changed from the default, i.e. disc, to black square by setting the CSS .

Example

<ul style="list-style-type:sqaure"> 
  <li>A</li>  
  <li>B</li>  
  <li>C</li>  
  <li>D</li>  
</ul>
Output
  • A
  • B
  • C
  • D

Unordered List: Circle Bullets

The bullet style of the unordered list is changed from the default, i.e. disc, to empty circle by setting the CSS.

Example

<ul style="list-style-type:circle"> 
  <li>A</li>  
  <li>B</li>  
  <li>C</li>  
  <li>D</li>  
</ul>
Output
  • A
  • B
  • C
  • D

Unordered List: Custom Bullets Using List-Style-Image

An image is used as the bullet of the unordered list; the value of the CSS list-style-imageproperty references the URL of the image.
There are no additional CSS properties related to the list-style-image property that allows modifying through CSS the properties of the image.
The position of the bullet image varies among browsers and the developer does not have control over the presentation of the bullet image when using the list-style-image property; the next example fixes this problem by using CSS background-image property.

Unordered List: Square Bullets Example

       <html> 
         <head>  
            <title>  
           HTML Tutroial 
            </title>  
         </head>  
          <body>
         <ul style="list-style-image:url(fl/img/bullet.png)"> 
         <li>A</li>  
         <li>B</li>  
         <li>C</li>  
         <li>D</li>  
         </ul>        
          </body>  
      </html>

Output

  • A
  • B
  • C
  • D
HTML-CODE EXPLANATION / EXAMPLE
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
Makes a bulleted list using the default bullet type:

  • text
  • text
  • text

 

<ul type=”disc”> Starts a bulleted list using discs as bullets:

  • This is one line
  • This is another line
  • And this is the final line

 

<ul type=”circle"> Starts a bulleted list using circles as bullets:

  • This is one line
  • This is another line
  • And this is the final line

 

<ul type=”square”> Starts a bulleted list using squares as bullets:

  • This is one line
  • This is another line
  • And this is the final line

 


Top

Ordered lists

Ordered lists, or numbered lists, are used to display a list of items that need to be placed in a specific order.

An example would be cooking instructions, which must be completed in order for the recipe to work:

  1. Gather ingredients
  2. Mix ingredients together
  3. Place ingredients in a baking dish
  4. Bake in oven for an hour
  5. Remove from oven
  6. Allow to stand for ten minutes
  7. Serve

Ordered lists can be displayed with one of several numbering or alphabetic systems—that is, letters or numbers.

The default in most browsers is decimal numbers, but there are more options:

Letters
  • Lowercase ascii letters (a, b, c…)
  • Uppercase ascii letters (A, B, C…).
  • Lowercase classical Greek: (έ, ή, ί…)
Numbers
  • Decimal numbers (1, 2, 3…)
  • Decimal numbers with leading zeros (01, 02, 03…)
  • Lowercase Roman numerals (i, ii, iii…)
  • Uppercase Roman numerals (I, II, III…)
  • Traditional Georgian numbering (an, ban, gan…)
  • Traditional Armenian numbering (mek, yerku, yerek…)
  • Again, you can use CSS to change the style of your lists.

Ordered List: Numbering Style Options

The CSS list-style-type property is used to change the numbering style from the default, i.e. decimal to lower roman numbers, with the value lower-roman
list-style-type:lower-roman

Example

         <ol style="list-style-type:lower-roman;" > 
            <li>A</li>  
            <li>B</li>  
            <li>C</li>  
            <li>D</li>  
         </ol> 

Ordered List: Start Attribute

To continue numbering from the first list onto the second list, the

Example

     <ol> 
         <li>A</li>  
         <li>B</li>    
         </ol>   
         
         <ol start="6" > 
         <li>A</li>  
         <li>B</li>   
     </ol>

Output

  1. A
  2. B
  1. A
  2. B

Ordered List: Value Attribute

To number items in an ordered list differently from the default, i.e. in the increasing order from one ("1"), the

      <ol> 
         <li value="8">Ashwani</li>   
         <li value="4">Soun</li>
         <li value="4">Deepak</li>  
      </ol>

Output

  1. Ashwani
  2. Soun
  3. Deepak
HTML-CODE EXPLANATION / EXAMPLE
<ol>
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
Makes a numbered list using the default number type:

  1. text
  2. text
  3. text

 

<ol start=”5″> Starts a numbered list, first # being 5.

    1. This is one line
    2. This is another line
    3. And this is the final line

 

<ol type=”A”> Starts a numbered list, using capital letters.

    1. This is one line
    2. This is another line
    3. And this is the final line

 

<ol type=”a”> Starts a numbered list, using small letters.

    1. This is one line
    2. This is another line
    3. And this is the final line

 

<ol type=”I”> Starts a numbered list, using capital roman numbers.

    1. This is one line
    2. This is another line
    3. And this is the final line

 

<ol type=”i”> Starts a numbered list, using small roman numbers.

    1. This is one line
    2. This is another line
    3. And this is the final line

 

<ol type=”1″> Starts a numbered list, using normal numbers.

    1. This is one line
    2. This is another line
    3. And this is the final line

 

<ol type=”I” start=”7″> An example of how type and start can be combined.

    1. This is one line
    2. This is another line
    3. And this is the final line

 


Top

Definition lists

Definition lists (dl) consist of two parts: a term(dt) and a description(dd). To mark up a definition list, you need three HTML elements; a container

     <dl>
        <dt>Term 1</dt>
          <dd>Definition 1 for Term 1</dd>>
          <dd>Definition 2 for Term 1</dd>
          <dd>Definition 3 for Term 1</dd>
        <dt>Term 2</dt>
          <dd>Definition 1 for Term 2</dd> 
        <dt>Term 3</dt>
          <dd>Definition 1 for Term 3</dd> 
          <dd>Definition 2 for Term 3</dd>
    </dl>  

Output

Term 1
Definition 1 for Term 1
Definition 2 for Term 1
Definition 3 for Term 1
Term 2
Definition 1 for Term 2
Term 3
Definition 1 for Term 3
Definition 2 for Term 3

Nested HTML Lists

List can be nested (lists inside lists).

   <ul> 
     <li>A</li>  
     <li>B
       <ul> 
         <li>A</li>  
         <li>B</li>  
         <li>C</li>  
         <li>D</li>  
        </ul>    
       </li>
     <li>C</li>  
     <li>D</li>  
   </ul>    

Output

  • A
  • B
    • A
    • B
    • C
    • D
  • C
  • D

Share this article on