HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list elements. Lists may contain:

<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 definition list. This arranges your items in the same way as they are arranged in a dictionary.

HTML List Item Code:

<ul>
<li>I am a list item!>
<li>I am a list item too!>
<li>I am a list item also!>
</ul>

HTML List Items:

  •     I am a list item!
  •     I am a list item too!
  •     I am a list item also!

The actual list tags themselves, such as <ul>, are nothing but container elements for list items (<li>). They work behind the scenes to identify the beginning and ending of an HTML list element.

HTML – Unordered Lists

<h4 align=”center”>Shopping List</h4>
<ul>
<li>Milk</li>
<li>Toilet Paper</li>
<li>Cereal</li>
<li>Bread</li>
</ul>

An unordered list (<ul>) signifies to a web browser that all list items contained inside the <ul> tag should be rendered with a bullet preceding the text. The default bullet type for most web browsers is a full disc (black circle), but this can be adjusted using an HTML attribute called type. HTML Default Bullet List Code:

Unordered HTML Lists – The Style Attribute

A style attribute can be added to an unordered list, to define the style of the marker:

Style Description
list-style-type:disc The list items will be marked with bullets (default)
list-style-type:circle The list items will be marked with circles
list-style-type:square The list items will be marked with squares
list-style-type:none The list items will not be marked

Here are the different bullet options:

Disc: <ul style=”list-style-type:disc”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Circle: <ul style=”list-style-type:circle”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Square: <ul style=”list-style-type:square”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
None <ul style=”list-style-type:none”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Ordered HTML Lists – The Type Attribute

A type attribute can be added to an ordered list, to define the type of the marker:

Type Description
type=”1″ The list items will be numbered with numbers (default)
type=”A” The list items will be numbered with uppercase letters
type=”a” The list items will be numbered with lowercase letters
type=”I” The list items will be numbered with uppercase roman numbers
type=”i” The list items will be numbered with lowercase roman numbers

HTML Lists Codes

Numbers <ol type=”1″>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Uppercase Letters <ol type=”A”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lowercase Letters <ol type=”a”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Uppercase Roman Numbers: <ol type=”I”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lowercase Roman Numbers: <ol type=”i”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Horizontal Lists

HTML lists can be styled in many different ways with CSS. One popular way, is to style a list to be displayed horizontally:

<!DOCTYPE html>
<html><head>
<style>
ul#menu li {
display:inline;
}
</style>
</head><body><h2>Horizontal List</h2><ul id=”menu”>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>

</body>
</html>

HTML List Tags

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

 

Summary

  • Use the HTML <ul> element to define an unordered list
  • Use the HTML style attribute to define the bullet style
  • Use the HTML <ol> element to define an ordered list
  • Use the HTML type attribute to define the numbering type
  • Use the HTML <li> element to define a list item
  • Use the HTML <dl> element to define a description list
  • Use the HTML <dt> element to define the description term
  • Use the HTML <dd> element to define the description data
  • Lists can be nested inside lists
  • List items can contain other HTML elements
  • Use the CSS property display:inline to display a list horizontally