HTML Lists (Ordered, Unordered, Description, and Horizontal)

HTML lists enable web developers to gather in list a number of associated things.

Example

An unordered HTML list:

  • Item 1
  • Item 2
  • Item 3
  • Item 4

An ordered HTML list:

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

It is also used for with example, lists and tables, lists and images, lists without bullets, lists definition, attributes, and questions

Unordered HTML List

The ul tag is the beginning of an unordered list. The li tag begins with each item of the list.

The list items are defined default by bullets (little black circles):

Example

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

Result of the above query

  • Coffee
  • Tea
  • Milk

It is also used for unordered list example, type, attributes, default style, code, arrow, line spacing, without bullets, horizontal and unordered list with hyperlink

Ordered HTML List

The ol tag denotes an ordered list. Each list item is preceded by the li tag.

The list elements are denoted by default with numbers:

Example

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Result of the above query

  1. Coffee
  2. Tea
  3. Milk

It is also used for list and unordered list with examples, ordered list in table and background color, ordered list number style, ordered list start 2

HTML Description Lists

Description lists are also supported by HTML.

A description list is a list of keywords that each have a description.

The description list is defined by the dl tag, the term (name) is defined by the dt tag, and each term is described by the dd tag:

Example

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

Result of the above query

Coffee
- black hot drink
Milk
- white cold drink

It is also used for description list same line and inline, description list element and examples, accessibility, style type color, spaces, html nested description list

HTML Unordered Lists

An unordered (bulleted) list is defined by the HTML ul element.

Unordered HTML List

The ul tag is the beginning of an unordered list. The li tag begins with each item of the list.

The list items are defined default by bullets (little black circles):

Example

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

Result of the above query

  • Coffee
  • Tea
  • Milk

It is also used for unordered list bullet types, custom types and no bullets, unordered list attributes, unordered list style, horizontal, indent second line, custom bullets

Unordered HTML List - Choose List Item Marker

The CSS list-style-type property or html type attribute specifies the appearance of the list item marker. It can have one of the values listed below:

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

Example

<p>Type Disc</p>

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

<p>Type Circle</p>

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

<p>Type Square</p>

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

<p>Type None</p>

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

Result of the above query

Type Disc

  • Coffee
  • Tea
  • Milk

Type Circle

  • Coffee
  • Tea
  • Milk

Type Square

  • Coffee
  • Tea
  • Milk

Type None

  • Coffee
  • Tea
  • Milk

It is also used for list item without bullets, list item indent, spacing, style, onclick, color, alphabet, list item subitem

Nested HTML Lists

Lists can be nested (list inside list):

Example

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Result of the above query

  • Coffee
  • Tea
    • Black tea
    • Green tea
  • Milk

Note: A list item (li) may have a new list and additional HTML items, such as pictures and links, etc.

It is also used for nested list program, example, exercises, item, style, not indenting, nested list roman numerals and nested numbering.

Horizontal List with CSS

The CSS may be used to style HTML lists in many different ways.

One typical technique is to build a navigation menu by styling a list horizontally:

It is also used for horizontal line css, horizontal list css, horizontal align css, horizontal table css, horizontal list menu with submenu items

HTML Ordered Lists

An ordered list is defined by the HTML ol element. A numerical or alphabetical order can be used in an ordered list.

Ordered HTML List

The ol tag is used to start an ordered list. The li tag is used to begin each list item.

The list elements are denoted by default with numbers:

Example

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Result of the above query

  1. Coffee
  2. Tea
  3. Milk

It is also used for html ordered list example and programs, html ordered list in table, background color, number style, color, list style type

Ordered HTML List - The Type Attribute

The ol Tag type property determines the item marker list type:

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

Example:

<p>Numbers</p>

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<p>Uppercase Letter</p>

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<p>Lowercase Letter</p>

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<p>Uppercase Roman Numbers</p>

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<p>Lowercase Roman Numbers</p>

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Result of the above query

Numbers

  1. Coffee
  2. Tea
  3. Milk

Uppercase Letter

  1. Coffee
  2. Tea
  3. Milk

Lowercase Letter

  1. Coffee
  2. Tea
  3. Milk

Uppercase Roman Numbers

  1. Coffee
  2. Tea
  3. Milk

Lowercase Roman Numbers

  1. Coffee
  2. Tea
  3. Milk

It is also used for ol type attribute, ol type not working, ol types (a, dot, 1.1, bracket, none, bullet, arabic), ordered list type style, enlist the different types of formats in ordered list, how many types of ordered list are there in html

Control List Counting

A sorted list starts by default with 1. You may use the start property if you wish to start counting from a certain number.

Example

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Result of the above query

  1. Coffee
  2. Tea
  3. Milk

It is also used for attribute syntax, html id attribute start with number, start attribute is used with which tag, start attribute of ordered list, start attribute is not applicable

Nested HTML Lists

Lists can be nested (list inside list):

Example

<ol>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>

Result of the above query

  1. Coffee
  2. Tea
    1. Black tea
    2. Green tea
  3. Milk

Note: A list item (li) can include a new list as well as other HTML elements such as photos, links, and so on.

It is also used for nested list exercises, nested list ol and ul, nested list style and numbering, indent, items, roman numerals

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 a term in a description list
<dd> Describes the term in a description list

HTML Other Lists

It is also used for different list types

Description lists are also supported by HTML.

HTML Description Lists

A description list is a list of keywords that each have a description.

The description list is defined by the dl tag, the term (name) is defined by the dt tag, and each term is described by the dd tag:

Example

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

Result of the above query

Coffee
- black hot drink
Milk
- white cold drink

It is also used for Description Lists example, Description Lists the same line, Description Lists element and accessibility, style type color, spaces, HTML nested description list, Description Lists definition, Description Lists with 2 elements