Lists

Lists in HTML organize content into ordered (<ol>), unordered (<ul>), and definition (<dl>) lists, with items defined using (li>) or(dt>/<dd>) or enhancing content structure and readability.

Lists in HTML

Lists in HTML organize content into a structured format. The three primary types of lists are:

Ordered Lists
Unordered Lists
Definition Lists

Unordered List `<ul>`

Displays items with bullet points.
Each item is enclosed in <li>.

Unordered List Example

Apple
Banana
Cherry

index.html

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

Ordered List `<ol>`

Displays items sequentially using numbers or letters.
The type attribute modifies numbering styles (1, A, a, I, i).

Ordered List Example

Step One
Step Two
Step Three

index.html

<ol type="A">
  <li>Step One</li>
  <li>Step Two</li>
  <li>Step Three</li>
</ol>

Definition List `<dl>`

Utilized for term-definition pairs.
<dt> specifies the term, while <dd> provides its description.

Definition List Example

HTML: HyperText Markup Language
CSS: Cascading Style Sheets

index.html

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Nested Lists

Lists can be placed within other lists to create hierarchical structures.

Nested Lists Example

Fruits
- Apple
- Orange
Vegetables

index.html

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Orange</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

Styling Lists with CSS

list-style-type: Changes bullet or number styles (circle, square, none).
list-style-image: Replaces default bullets with an image.

Example

style.css

ul {
  list-style-type: square;
}
ol {
  list-style-type: upper-roman;
}

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>`	Provides a description for a term

Conclusion

Using HTML lists improves content structure and readability. Ordered, unordered, and definition lists each serve specific purposes, enhancing web page organization and user experience.

<xmp>

The HTML <xmp> element, which is now obsolete, was used to display preformatted text with visible HTML tags. Today, the <pre> element or code escaping techniques serve as modern alternatives.

<ol>

The HTML <ol> element generates a numbered list, where each item (<li>) appears in a defined sequence, often used for content that follows a particular order.