lists in HTML

HTML lists allow web developers to group a set of related items into lists.

unordered list

The HTML <ul> element represents an unordered list of items, typically rendered as a bulleted list.

html:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

result:

• HTML
• CSS
• JavaScript

ordered list

The HTML <ol> element represents a ordered list of items, typically rendered as a numbered list.

html:

<ol>
  <li>apple</li>
  <li>pear</li>
  <li>grapes</li>
</ol>

result:

1. apple
2. pear
3. grapes

type attribute

Additionally we can change the type of the list item marker e.g. from numbers to uppercase letters.

html:

<ol type="A">
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol>

result:

1. first item
2. second item
3. third item

start atrribute

We can change the starting number from which the list items are counted:

html:

<ol start="10">
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol> 

result:

10. first item
11. second item
12. third item

reverse attribute

 The attribute reverse allows to display list’s items are in reverse order. Items will be numbered from high to low.

html:

<ol reversed>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol> 

result:

1. first item
2. second item
3. third item

nested list

we can nest one list inside another, no matter if it is ordered or unordered list.

html:

<ol>
  <li>first item</li>
  <li>second item
    <ul>
      <li>first subitem</li>
      <li>second subitem</li>
    </ul>
  </li>
</ol>

result:

1. first item
2. second item    
   • first subitem
   • second subitem

Description list

The HTML <dl> element represents a description list. Each item consists of a term (represented by <dt> tag) and a description (represented by <dd> tag).

html:

<dl>
  <dt>HTML</dt>
  <dd>a descriptive language that specifies webpage structure</dd>
  <dt>CSS</dt>
  <dd>a stylesheet language used to describe the presentation of a document</dd>
</dl>

result:

HTML

a descriptive language that specifies webpage structure

CSS

a stylesheet language used to describe the presentation of a document