Hello, world!

Lists HTML

If you need to apply a list on a website, the HTML tutorial illustrates three different types of list that is provided by HTML: definition lists, ordered and unordered lists.



HTML Lists

HTML offers three various methods for specifying lists of information. All lists may contain:
Unordered information <ul> - This will list items with small bullets icons in front of the item listed. They are for lists whose order does not matter.
Ordered information <ol> - These are lists whose sequence is required. So intead of bullets these list items have a definite order or ranking.
Definitions <dl> - Definition lists create a list with a list of pairs of terms and definitions. It arranges your items similar as they are arranged in the dictionary.

Definition Lists

A definition list is a list of terms with its corresponding definition.
Tags to be used in using Define List:
<dl> tag - represents the start of the list
<dt> tag - represents the term or name
<dd> tag - represents the description or definition of the data

HTML code example definition lists:

<dl>
<dt><b> dl tag</b></dt>
<dd>represents the start of the list</dd>
<dt><b>dt tag</b></dt>
<dd>represents the term or name </dd>
<dt><b>dd tag</b></dt>
<dd>represents the description or definition of the data </dd>
</dl>

HTML output definition lists:

dl tag
represents the start of the list
dt tag
represents the term or name
dd tag
represents the description or definition of the data


Ordered List

To build a numbered list use the <ol> tag and should end it with the </ol> tag.
Every list item also begins with the <li> tag.
Numbering begins at one and is incremented by one for every subsequent ordered list element within the <li> tag.

The Type Attribute:
The HTML type attribute for <ol> tag is applied to indicate the type of numbering you want to put to an orderd list.

Syntax ordered list:

<ol type=” style”>

Type Description
disc Marked with bullets (default)
circle Marked with circles
square Marked with squares

HTML code example ordered list:

<h3>How to create HTML Ordered List with Numbers</h3>
   <ol type="1">
   <li>Love</li>
   <li>Joy</li>
   <li>Hope</li>
   <li>Faith</li>
   </ol>

HTML output ordered list:

How to create HTML Ordered List with Numbers

  1. Love
  2. Joy
  3. Hope
  4. Faith

HTML code example ordered list:

<h3>How to creat HTML Ordered List with Uppercase Letters</h3>
   <ol type="A">
   <li>Love</li>
   <li>Joy</li>
   <li>Hope</li>
   <li>Faith</li>
   </ol>

HTML output ordered list:

How to creat HTML Ordered List with Uppercase Letters

  1. Love
  2. Joy
  3. Hope
  4. Faith

HTML code example ordered list:

<h3>How to create HTML Ordered List with Lowercase Letters</h3>
   <ol type="a">
   <li>Love</li>
   <li>Joy</li>
   <li>Hope</li>
   <li>Faith</li>
   </ol>

HTML output ordered list:

How to create HTML Ordered List with Lowercase Letters

  1. Love
  2. Joy
  3. Hope
  4. Faith

HTML code example ordered list:

<h3>How to create HTML Ordered List with Uppercase Roman Numbers</h3>
   <ol type="I">
   <li>Love</li>
   <li>Joy</li>
   <li>Hope</li>
   <li>Faith</li>
   </ol>

HTML output ordered list:

How to create HTML Ordered List with Uppercase Roman Numbers

  1. Love
  2. Joy
  3. Hope
  4. Faith

HTML code example ordered list:

<h3>How to create HTML Ordered List with Lowercase Roman Numbers</h3>
   <ol type="i">
   <li>Love</li>
   <li>Joy</li>
   <li>Hope</li>
   <li>Faith</li>
   </ol>

HTML output ordered list:

How to create HTML Ordered List with Lowercase Roman Numbers

  1. Love
  2. Joy
  3. Hope
  4. Faith


Unordered lists

To build a bulleted list use the <ul> tag and should end it with the </ul> tag.
Every list item begins with the <li> tag.

The type Attribute
The HTML type attribute for <ul> tag is used to indicate the type of bullet you want to put to an unorderd list.

Syntax unordered lists:

<ul type=” type”>

Type Description
disc Marked with bullets (default)
circle Marked with circles
square Marked with squares

HTML code example unordered lists:

<h3>How to create Unordered List with Circle Bullets</h3>
<ul type="circle">
  <li>Love</li>
  <li>Joy</li>
  <li>Hope</li>
  <li>Faith</li>
</ul>

HTML output unordered lists:

How to create Unordered List with Circle Bullets

  • Love
  • Joy
  • Hope
  • Faith

HTML code example unordered lists:

<h3>How to create Unordered List with Disc Bullets</h3>
<ul type="disc">
  <li>Love</li>
  <li>Joy</li>
  <li>Hope</li>
  <li>Faith</li>
</ul>

HTML output unordered lists:

How to create Unordered List with Disc Bullets

  • Love
  • Joy
  • Hope
  • Faith

HTML code example unordered lists:

<h3>How to create Unordered List with Square Bullets</h3>
<ul type="square">
  <li>Love</li>
  <li>Joy</li>
  <li>Hope</li>
  <li>Faith</li>
</ul>

HTML output unordered lists:

How to create Unordered List with Square Bullets

  • Love
  • Joy
  • Hope
  • Faith


Start Attribute

When you need to begin your numbered list to a particular value, you can apply the start attribute for <ol> tag.

Syntax start attribute:

<ol type="type" start="number">    

Possible options:
<ol type="1" start="3">    - Lists will begin with 3
<ol type="A" start="3">    - Lists will begin with C
<ol type="a" start="3">    - Lists will begin with c
<ol type="I" start="3">    - Lists will begin with III
<ol type="i" start="3">    - Lists will begin with iii

HTML code example start attribute:

<ol type="I" start="3">
   <li>Love</li>
   <li>Joy</li>
   <li>Hope</li>
   <li>Faith</li>
   </ol>

HTML output start attribute:

  1. Love
  2. Joy
  3. Hope
  4. Faith

HTML code example start attribute:

<body>
   <ol type="A" start="10">
   <li>Love</li>
   <li>Joy</li>
   <li>Hope</li>
   <li>Faith</li>
   </ol>   

HTML output start attribute:

  1. Love
  2. Joy
  3. Hope
  4. Faith


Horizontal Lists

With CSS yiu can also style your HTML list such as the Horizontal List which will display your list horizontally.

HTML code example horizontal lists:

<!DOCTYPE html>
<html>
<head>
<style>
ul#fruits li {
    display:inline;
}
</style>
</head>
<body>
<h2>How to create Horizontal List</h2>
<ul id="fruits">
  <li>Apple</li>
  <li>Grapes</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>  
</body>
</html>

HTML output horizontal lists:

How to create Horizontal List

  • Apple
  • Grapes
  • Banana
  • Orange


Nested HTML Lists

The Nested HTML List is a list item consists of  another list.
It can contain images, links and even new list.

HTML code example nested html lists:

<h3> How to create HTML Nested List</h3>
<ul>
  <li>Fruits</li>
    <ul>
    <li>Apple</li>
    <li>Grapes</li>
    </ul>
  <li>Vegetables</li>
    <ul>
    <li>Cabbage</li>
    <li>Carrots</li>
    </ul>
   <li>Animals</li>
    <ul>
    <li>Dog</li>
    <li>Cat</li>
    </ul>
</ul>

HTML output nested html lists:

How to create HTML Nested List

  • Fruits
    • Apple
    • Grapes
  • Vegetables
    • Cabbage
    • Carrots
  • Animals
    • Dog
    • Cat


Summary

HTML <ul> element - Apply this to identify an unordered list
HTML style attribute - Apply this to identify the bullet style
HTML <ol> element - Apply this to identify an ordered list
HTML type attribute - Apply this to identify the numbering type
HTML <li> element - Apply this to identify a list item
HTML <dl> element - Apply this to identify a description list
HTML <dt> element - Apply this to identify the description term
HTML <dd> element - Apply this to identify the description data
CSS property display:inline - Apply this to present a list horizontally
You can nest lists within lists
The list items can hold other HTML elements