HTML Lists

HTML Language

Lists

Lists are used when you want to display a set of data or information by listing them. You can also have nested lists.


Types

There are three main types of lists in HTML: unordered list, ordered list, and description list. We will discuss each of them.


Unordered List

In an unordered list, the information is being displayed with bullets or other types of non-number item. Here is an example program:

<!DOCTYPE html>
<html>
 <body>
  <ul>
   <li>HTML</li>
   <li>C</li>
   <li>Python</li>
  </ul>
 </body>
</html>

As you see, ul, which stands for Unordered List, will define an list with bullet points. li, for List Item, defines each item in the list. You can change the bullet point to other listing symbols by adding the attribute style to the ul tag. You can set the value of the attribute to "list-style-type:disc", which is the default, "list-style-type:circle", "list-style-type:square", or "list-style-type:none". The "list-style-type:none" is sometimes used to create a navigation bar instead of using a table.


Ordered Lists

Ordered lists are numbered, showing steps or importance.

<!DOCTYPE html>
<html>
 <body>
  <ol>
   <li>Learn HTML</li>
   <li>Practice HTML</li>
   <li>Buy domain name</li>
   <li>Rent cloud storage</li>
   <li>Make your website</li>
  </ol>
 </body>
</html>


Description Lists

Description lists are sometimes useful. For example, you can use it to provide a definition for a term when making a dictionary webpage. The concept is the same with the other two lists, but the li tag is splitted into two parts, the dt tag for Description Term, and dd for the description of the term.

<!DOCTYPE html>
<html>
 <body>
  <dl>
   <dt>HTML</dt>
   <dd>HyperText Markup Language</dd>
   <dt>C</dt>
   <dd>A widely used programming language</dd>
  </dl>
 </body>
</html>


Practice

Create a simple unordered list without bullet points.

Create a horizontal instead of vertical list without bullets to create a simple navigation bar with lists.


Tags

Tag Meaning
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines an item in a list
<dl> Defines a description list
<dt> Defines a term in the description list
<dd> Defines the description or the definition of a term in a description list



<< Previous TOC Next >>