HTML Lists

❮ Previous Next ❯

HTML lists allow web developers to group a set of related items in lists.

Unordered HTML List

An unordered list begins with the <ul> tag, and each item in the list starts with the<li> tag.

By default, the list items will be displayed with small black circle bullets in an unordered list:

Ordered HTML List

An ordered list begins with the <ol> tag, and each item in the list starts with the <li> tag.

By default, the list items in an ordered list will be numbered:

HTML Description Lists

HTML also includes support for description lists.

A description list consists of a series of terms, each accompanied by a description.

The <dl> tag defines the description list, the <dt> tag signifies the term (name), and the<dd> tag is used to describe each term:

HTML List Tags

Tag	Description
<ul>	tag defines an unordered list in HTML.
<ol>	tag defines an ordered list in HTML.
<li>	tag defines an list item in HTML.
<dl>	tag defines an description list in HTML.
<dt>	tag defines a term in a description list in HTML.
<dd>	tag defines the term in a description list in HTML.

HTML Unordered Lists

The HTML <ul> tag is used to create an unordered (bulleted) list in HTML.

Unordered HTML List

In HTML, an unordered list is initiated with the <ul> tag. tag, and each list item begins with the <li> tag.

By default, in an unordered list, the list items are marked with small black circle bullets:

Unordered HTML List - Choose List Item Marker

The CSS list-style-type property is utilized to determine the appearance of the list item marker. It can take on one of the following values:

Value	Description
disc	property sets the list item marker to a bullet, which is the default style.
circle	property can be used to change the list item marker to a circle.
square	property can be employed to modify the list item marker to a square shape.
none	property is set to "none" the list items will not be marked with any style

HTML Ordered Lists

The HTML <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.

Ordered HTML List

In HTML, an ordered list commences with the <ol> tag, and each item in the list is denoted by the <li> tag.

By default, in an ordered list, the list items will be marked with numbers:

Ordered HTML List - The Type Attribute

The type attribute of the <ol> tag, specifies the type of list item marker used in an ordered list.

Type	Description
type="1"	The list items will be numbered with numbers in an ordered list.
type="A"	The list items will be numbered using uppercase letters in an ordered list.
type="a"	The list items using lowercase letters.
type="I"	The list items using uppercase Roman numerals.
type="i"	The list items using lowercase Roman numerals.

<!DOCTYPE html>
<html>
  <body>
    <h2>An Unordered HTML List</h2>
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
    <h2>An Ordered HTML List</h2>
    <ol>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
  </body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <ol>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>

<dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>

</body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
  </body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
  <ul style="list-style-type:disc;">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
</body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <ol>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <ol type="1">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <ol type="a">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>
  </body>
</html>

❮ Previous Next ❯

HTML Basics

HTML Tags

HTML Attributes

HTML Graphics

HTML APIs

HTML DOM

HTML Audio/Video

HTML 5 MathML

HTML Lists

Unordered HTML List

Ordered HTML List

HTML Description Lists

HTML List Tags

HTML Unordered Lists

Unordered HTML List

Unordered HTML List - Choose List Item Marker

HTML Ordered Lists

Ordered HTML List

Ordered HTML List - The Type Attribute

Web Development