HTML Lists

HTML lists are used to group related items together, and there are three main types of lists in HTML:

1. Ordered List (<ol>): Used to create a list of items where the order matters. Each list item is numbered.

2. Unordered List (<ul>): Used to create a list of items where the order doesn’t matter. Each list item is typically marked with a bullet point.

3. Definition List (<dl>): Used to create a list of terms and their definitions.

Ordered List (<ol>)

An ordered list is created using the <ol> tag, and each item within the list is wrapped in an <li> (list item) tag.

Example:

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

This would render as:

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

Unordered List (<ul>)

An unordered list is created using the <ul> tag, and like ordered lists, each item is wrapped in an <li> tag.

Example:

<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

This would render as:

• Item one
• Item two
• Item three

Definition List (<dl>)

A definition list is created using the <dl> tag. Inside a definition list, each term is wrapped in a <dt> (definition term) tag, and each definition is wrapped in a <dd> (definition description) tag.

Example:

<dl>
  <dt>HTML</dt>
  <dd>A markup language for creating web pages</dd>
  <dt>CSS</dt>
  <dd>A style sheet language for describing the presentation of a document</dd>
</dl>

This would render as:

HTML: A markup language for creating web pages

CSS: A style sheet language for describing the presentation of a document

Nesting Lists

Lists can be nested within each other to create more complex structures.

Example:

<ul>
  <li>Item one
    <ul>
      <li>Subitem one</li>
      <li>Subitem two</li>
    </ul>
  </li>
  <li>Item two</li>
</ul>

This would render as:

• Item one
  • Subitem one
  • Subitem two
• Item two

HTML Lists – Objective Questions (MCQs)

Related HTML Lists Topics