HTML Lists

Unordered

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default.

HTML Code:

<h2>An unordered HTML list</h2> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <h2>Unordered List with Circle Bullets</h2> <ul style="list-style-type:circle"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <h2>Unordered List with Square Bullets</h2> <ul style="list-style-type:square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <h2>Unordered List without Bullets</h2> <ul style="list-style-type:none"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>

Result:

An unordered HTML list

  • Coffee
  • Tea
  • Milk

Unordered List with Circle Bullets

  • Coffee
  • Tea
  • Milk

Unordered List with Square Bullets

  • Coffee
  • Tea
  • Milk

Unordered List without Bullets

  • Coffee
  • Tea
  • Milk

Ordered

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default.

HTML Code:

<h2>An ordered HTML list</h2> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <h2>Ordered List with Letters</h2> <ol type="A"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <h2>Ordered List with Lowercase Letters</h2> <ol type="a"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <h2>Ordered List with Roman Numbers</h2> <ol type="I"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <h2>Ordered List with Lowercase Roman Numbers</h2> <ol type="i"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

Result:

An ordered HTML list

  1. Coffee
  2. Tea
  3. Milk

Ordered List with Letters

  1. Coffee
  2. Tea
  3. Milk

Ordered List with Lowercase Letters

  1. Coffee
  2. Tea
  3. Milk

Ordered List with Roman Numbers

  1. Coffee
  2. Tea
  3. Milk

Ordered List with Lowercase Roman Numbers

  1. Coffee
  2. Tea
  3. Milk

Description Lists

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term.

HTML Code:

<h2>A Description List</h2> <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>

Result:

A Description List

Coffee
- black hot drink
Milk
- white cold drink

Nested Lists

List can be nested (lists inside lists).

HTML Code:

<h2>A Nested List</h2> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul>

Result:

A Nested List

  • Coffee
  • Tea
    • Black tea
    • Green tea
  • Milk

Horizontal Lists

HTML lists can be styled in many different ways with CSS.

CSS Code:

.hlist ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333333; } .hlist li { float: left; } .hlist li a { display: block; color: white; text-align: center; padding: 16px; text-decoration: none; } .hlist li a:hover { background-color: #111111; }

HTML Code:

<div class="hlist"> <ul class="hlist"> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </div>

Result:

HTML Index

References

  1. W3Schools

This page is only a summary of the material from W3Schools. Definitions, Examples and Codes are exclusive property of W3Schools.