HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML APIs
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

HTML Lists

Unordered List

  • Delhi
  • Bengaluru
  • Mumbai
  • Delhi
  • Bengaluru
  • Mumbai

Ordered List

  1. Delhi
  2. Bengaluru
  3. Mumbai
  1. Delhi
  2. Bengaluru
  3. Mumbai

Lists are used to group related pieces of information together, so they are clearly associated with each other and easy to read.

There are three different types of HTML lists:

  • unordered list — used to group a set of related items, in no particular order
  • ordered list — used to group a set of related items, in a specific order
  • description list — used to display name/value pairs such as terms and their definitions

Each one has a specific purpose and meaning. They are not interchangeable.


HTML Unordered List

An unordered list is a collection of related items that have no special order or sequence.

This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet.

Run code

HTML Unordered List - Change List Item Marker

You can change list marker style using CSS list-style-type property.

The list-style-type property can have the following values:

  • disc - Sets the list item marker to a bullet (This is default)
  • circle - Sets the list item marker to a circle
  • square - Sets the list item marker to a square
  • none - No marker is shown
Run code

HTML Ordered List

Ordered lists, or numbered lists, are used to display a list of items that need to be placed in a specific order.

This list is created by using HTML <ol> tag. Each item in the list is marked with a Numeric value.

Run code

HTML Ordered List - The type Attribute

The type attribute of the ordered list, defines the type of the list item marker.

The type attribute can have the following values:

  • type="a" - indicates lowercase letters
  • type="A" - indicates uppercase letters
  • type="i" - indicates lowercase Roman numerals
  • type="I" - indicates uppercase Roman numerals
  • type="1" - indicates numbers (This is default)

This example specifies different kind of numbering type to use in the list.

Run code

HTML Ordered List - The start Attribute

It is possible to get an ordered list to start with a number other than 1.

This is done using the start attribute, which takes a numeric value.

Run code

HTML Description List

Description lists associate specific names and their values within a list, for example items in an ingredient list and their descriptions, article metadata such as authors and categories and their values, entries are listed like in a dictionary or encyclopedia.

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

Run code

HTML Nested List

HTML List can be nested (lists inside lists).

The following example shows how to nest ordered and unordered list:

Run code

HTML List Tags

Tags Description
<ul> Specifies an unordered list
<ol> Specifies an ordered list
<li> Specifies a list item
<dl> Specifies a description list
<dt> Specifies a term in a description or definition list, and as such must be used inside a <dl> element
<dd> Provides the details about or the definition of the preceding term (<dt>) in a description list (<dl>)