HTML Tutorials for Beginners to Advance

HTML Basic Structure, Elements in HTML, HTML Headlines, List in HTML, Insert Images in Web Pages, Tables in HTML, HTML form design, HTML5 Elements, HTML Canvas, etc.

HTML Lists


HTML List Example

An Unordered List:

  • Content
  • Content
  • Content
  • Content

An Ordered List:

  1. First Content
  2. Second Content
  3. Third Content
  4. Fourth Content

Unordered HTML List

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:

See this example:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Unordered HTML List Attributes

The CSS list-style-type property is used to define the style of the list item marker:

Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked

See this example:

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Ordered HTML List

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:

See this example:

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
  <li>Beetroot</li>
  <li>Ginger</li>
  <li>Potato</li>
  <li>Radish</li>
</ol>
</body>
</html>

Ordered HTML List Attributes

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 :-

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

See this example:

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "1">
  <li>Beetroot</li>
  <li>Ginger</li>
  <li>Potato</li>
  <li>Radish</li>
</ol>
</body>
</html>

HTML Definition Lists

Basically a definition list is composed of three HTML elements and some text. These are the <dl>, <dt> and <dd> elements.

Value Description
<dl> Defines the start of the list
<dt> A term
<dd> Term definition
</dl> Defines the end of the list

See this example:

<!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>