Creating Lists

Yaser Rahmati | یاسر رحمتی

Creating lists in HTML is straightforward, and there are two main types of lists:

  1. Ordered Lists: Use <ol> for ordered (numbered) lists.

  2. Unordered Lists: Use <ul> for unordered (bulleted) lists.

Each item in a list is enclosed in an <li> (list item) tag.

1. Ordered List (<ol>)

An ordered list displays items in a numbered sequence.

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

This will display:

  1. First item

  2. Second item

  3. Third item

2. Unordered List (<ul>)

An unordered list displays items with bullets.

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

This will display:

  • Item one

  • Item two

  • Item three

3. Nested Lists

You can nest lists inside each other.

<ul>
  <li>Item one</li>
  <li>Item two
    <ul>
      <li>Sub-item one</li>
      <li>Sub-item two</li>
    </ul>
  </li>
  <li>Item three</li>
</ul>

This will display:

  • Item one

  • Item two

    • Sub-item one

    • Sub-item two

  • Item three

4. Customizing List Markers

You can customize the marker types using the type attribute.

For ordered lists, you can change the number type:

<ol type="A">
  <li>First item</li>
  <li>Second item</li>
</ol>

This will display:

A. First item B. Second item

For unordered lists, you can change the bullet type:

<ul style="list-style-type: square;">
  <li>Item one</li>
  <li>Item two</li>
</ul>

This will display:

▪ Item one ▪ Item two

Example of a Full List

<!DOCTYPE html>
<html>
<head>
  <title>HTML Lists Example</title>
</head>
<body>
  <h2>Ordered List Example</h2>
  <ol>
    <li>Step one</li>
    <li>Step two</li>
    <li>Step three</li>
  </ol>

  <h2>Unordered List Example</h2>
  <ul>
    <li>Option one</li>
    <li>Option two</li>
  </ul>

  <h2>Nested List Example</h2>
  <ul>
    <li>Category one</li>
    <li>Category two
      <ul>
        <li>Subcategory one</li>
        <li>Subcategory two</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Keywords

HTML, Hypertext Markup Language, Tags, Elements, Attributes, Head, Body, Paragraph, Heading, Title, Meta, Link, Image, Anchor, Hyperlink, List, Table, Form, Input, Button, CSS, Class, ID, Inline, Block, Div, Span, Script, Styles, Font, Color, Background, Margin, Padding, Border, Doctype, HTML5, Video, Audio, Canvas, SVG

External Links

🌐 Personal Website 📄 Resume 🎥 Video Archive 💼 Finance Blog 🔐 Network & Security Notebook 🎬 Aparat Channel

PreviousEmbedding Videos and AudioNextBuilding Tables

Last updated