HTML LISTS

HTML has three ways for specifying lists of information. Lists may be:

  • <ul> – An unordered list. This will list items using plain bullets.
  • <ol> – An ordered list. This will use different schemes of numbers to list your items.
  • <dl> – A description lists. This is a list of terms, with a description of each term.

HTML Unordered Lists

It is a collection of related items that have no special order or sequence.

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Page</li>
<li>Pencil</li>
<li>Eraser</li>
<li>Sharpner</li>
<li>Ruler</li>
</ul>
</body>
</html>

It gives the following result:

  • Page
  • Pencil
  • Eraser
  • Sharpner
  • Ruler

The type Attribute

You can specify the type of bullet you like. By default it is a disc. Following are the possible options:

<ul type="square">
<ul type="disc">
<ul type="circle">

HTML Ordered Lists

If you want to put your items in a numbered list then HTML ordered list will be used. This list is created by using <ol> tag. The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>.

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Page</li>
<li>Pencil</li>
<li>Eraser</li>
<li>Sharpener</li>
<li>Ruler</li>
</ol>
</body>
</html>

This will produce following result:

  1. Page
  2. Pencil
  3. Eraser
  4. Sharpener
  5. Ruler

The type Attribute

You can use type attribute for <ol> tag to specify the type of numbering you like. By default it is a number. Following are the possible options:

<ol type="1"> - Default-Case Numerals.
<ol type="I"> - Upper-Case Numerals.
<ol type="i"> - Lower-Case Numerals.
<ol type="a"> - Lower-Case Letters.
<ol type="A"> - Upper-Case Letters.

The start Attribute

You can use start attribute for <ol> tag to specify the starting point of numbering you need. Following are the possible options:

<ol type="1" start="5">    - Numerals starts with 5.
<ol type="I" start="V">    - Numerals starts with V.
<ol type="i" start="5">    - Numerals starts with v.
<ol type="a" start="5">    - Letters starts with e.
<ol type="A" start="5">    - Letters starts with e.

HTML Description Lists

It makes use of following three tags.

  • <dl> – Defines the start of the list
  • <dt> – A term
  • <dd> – Term definition
  • </dl> – Defines the end of the list
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>

This gives the result:

HTML
This stands for Hyper Text Markup Language
HTTP
This stands for Hyper Text Transfer Protocol

Note: Lists can be nested.

PS: For any questions, queries, feedback and comments feel free to write us at support@qatechhub.com and amruta@qatechhub.com

Amruta Somani

About the Author

Amruta Somani