HTML List Tag Group

The List Tag Group is a group of tags that are used to define lists of data items. A list is a sequential display of related items. List group tags include <ul>, <ol>, <li>, <dl>, and others.

HTML Reference

Creating Lists

HTML supports 3 list types: unordered lists, ordered lists, and datalists.

Each of these list types have their own tags.


List Tags

Here are the tags that are available to design HTML lists.

Element Description
<ul> Creates an unordered, bulleted list
<ol> Creates a numerically or alphabetically ordered list
<li> Defines a list item. Used in <ol> and <ul> elements
<dl> Defines a description list
<dt> Adds a term or name to a <dl> element
<dd> Adds a description of a term or name to a <dl> element

Example

#

Different list types: <ul>, <ol>, and <dl>.

Unordered list
  • Vincent Van Gogh
  • Paul Cézanne
  • Claude Monet
Ordered list
  1. Amsterdam
  2. London
  3. Berlin
  4. Paris
Description list
National Gallery of Art
Washington DC, USA
Musée d'Orsay
Paris, France
Kunstmuseum
Basel, Switzerland
<h5>Unordered list</h5>

<ul>
  <li>Vincent Van Gogh</li>
  <li>Paul Cézanne</li>
  <li>Claude Monet</li>
</ul>

<h5>Ordered list</h5>

<ol>
  <li>Amsterdam</li>
  <li>London</li>
  <li>Berlin</li>
  <li>Paris</li>
</ol>

<h5>Description list</h5> 

<dl>
  <dt>National Gallery of Art</dt>
  <dd>Washington DC, USA</dd>
  <dt>Musée d'Orsay</dt>
  <dd>Paris, France</dd>
  <dt>Kunstmuseum</dt>
  <dd>Basel, Switzerland</dd> 
</dl>
	

Code explanation

The <ul> tag creates an unordered list with bullet points.

The <ol> tag creates an ordered list. This list is numeric.

The <li> tags define list items in both <ul> and <ol> elements.

The <dl>, <dt>, and <dd> tags together create a description list.

Tip: The <ul> and <ol> list types are widely used. The <dl> type not so much.


Did you know?

Did you know?

Styling lists with bullets and numbers

A variety of markers are availabe for items in <ul> and <ol> lists.

The items in a <ul> can have dots, circles, squares, or can be a custom image.

Items in an <ol> can be numeric, latin, and alphabetical, even in reverse order, etc.


You may also like

 Back to Tag Groups


Guides