HTML Lists

What is HTML Lists?

HTML lists are used to display items in a structured, easy-to-read format on a webpage. There are three main types of HTML lists:


1. Ordered Lists (<ol>)

An ordered list is used when the sequence of items matters. Each item is numbered automatically.

Syntax:

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

Output:

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

2. Unordered Lists (<ul>)

An unordered list is used when the sequence of items does not matter. Each item is marked with a bullet point.

Syntax:

<ul>
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ul>

Output:

  • Item A
  • Item B
  • Item C

3. Description Lists (<dl>)

A description list is used to group terms with their descriptions. It is useful for creating glossaries or defining concepts.

Syntax:

<dl>
  <dt>HTML</dt>
  <dd>A markup language for creating web pages.</dd>
  <dt>CSS</dt>
  <dd>Used to style the appearance of web content.</dd>
</dl>

Output:

  • HTML: A markup language for creating web pages.
  • CSS: Used to style the appearance of web content.

Nesting Lists

Lists can be nested within each other for more complex structures.

Example:

<ul>
  <li>Main Item 1
    <ul>
      <li>Sub-item 1.1</li>
      <li>Sub-item 1.2</li>
    </ul>
  </li>
  <li>Main Item 2</li>
</ul>

Output:

  • Main Item 1
    • Sub-item 1.1
    • Sub-item 1.2
  • Main Item 2

Attributes for Lists

Lists can have attributes like type and start (for <ol>) or classes and IDs (for styling with CSS).

Example:

<ol type="A" start="3">
  <li>Item 3</li>
  <li>Item 4</li>
</ol>

Output:

  1. Item 3
  2. Item 4

By combining these basic elements, you can create structured and readable content for your webpage.

Previous Next