HTML

HTML

πŸ“Œ HTML List

1. Introduction β€” What is a List?

Lists are a way to display multiple items on a web page in an organized format.

HTML provides three main types of lists:

  • Unordered List β†’ <ul>: items with bullets
  • Ordered List β†’ <ol> : items with numbers or letters
  • Description List β†’ <dl> : terms paired with descriptions

Lists help structure content clearly and improve readability.

2. Unordered List (<th>)

Unordered lists show items with bullet points by default. Each item is wrapped in <li> tags.

HTML

<ul style="list-style-type:square;">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

3. Ordered List (<ol>)

Ordered lists automatically number items.

By default, the numbering is <1, 2, 3...> but you can customize it using the <type> attribute:

HTML

<h3>To-Do List</h3>
<ol>
    <li>Have breakfast</li>
    <li>Start working</li>
    <li>Go for a walk</li>
</ol>
  • <1> β†’ Numbers (default)
  • <A> β†’ Uppercase letters
  • <a> β†’ Lowercase letters
  • <I> β†’ Roman numerals (uppercase)
  • <i> β†’ Roman numerals (lowercase)
HTML

<ol type="A">
    <li>Step 1</li>
    <li>Step 2</li>
    <li>Step 3</li>
</ol>

4. Starting Number with <start> Attribute

You can begin numbering from any number using the <start> attribute:

HTML

<ol start="5">
    <li>Fifth</li>
    <li>Sixth</li>
    <li>Seventh</li>
</ol>

5. Description List (<dl>)

Description lists are useful to show terms and their definitions:

  • <dl> β†’ container for the list
  • <dt> β†’ the term
  • <dd> β†’ the description
HTML

<h3>Programming Languages</h3>
<dl>
    <dt>HTML</dt>
    <dd>Defines the structure of web pages.</dd>

    <dt>CSS</dt>
    <dd>Adds style and design to web pages.</dd>

    <dt>JavaScript</dt>
    <dd>Adds interactivity to web pages.</dd>
</dl>

6. Nested Lists

Lists can be placed inside other lists to create sub-items or multi-level menus :

HTML

<h3>Shopping List</h3>
<ul>
    <li>Fruits
        <ul>
            <li>Apple</li>
            <li>Banana</li>
        </ul>
        </li>
        <li>Drinks
        <ul>
            <li>Water</li>
            <li>Coffee</li>
        </ul>
    </li>
</ul>

7. Styling Lists with CSS

You can enhance the appearance of lists by removing bullets or adding custom icons:

HTML

<style>
    ul.custom-list {
        list-style-type: none; /* Remove default bullets */
        padding: 0;
    }

    ul.custom-list li::before {
        content: "βœ”οΈ ";
        color: green;
    }
</style>
<ul class="custom-list">
    <li>Learn HTML</li>
    <li>Learn CSS</li>
    <li>Learn JavaScript</li>
</ul>

8. Creating a Horizontal Menu with Lists

Lists are often used to build navigation menus.

You can display list items horizontally using inline-block or flex:


<h2>HTML & CSS Course Content</h2>
    <ol>
        <li>HTML Basics
            <ul>
                <li>Tags and Structure</li>
                <li>Links</li>
                <li>Lists</li>
            </ul>
            </li>
                <li>CSS Basics
            <ul>
                <li>Selectors</li>
                <li>Colors</li>
                <li>Fonts</li>
            </ul>
                </li>
        <li>Project: Personal Web Page</li>
    </ol>
    </body>
</html>

  • Quick Tips / Best Practices

  • Use <ul> for unordered lists, <ol> for ordered, and <dl> for description lists.
  • Style lists with CSS for spacing, bullets, or icons.
  • Nested lists are helpful for menus or hierarchical content.
  • Use semantic lists for accessibility and better HTML structure.
  • You can customize bullets with <list-style-type>, <list-style-image>, or pseudo-elements like <::before>.

Html Table
Html Blocks and Inline Elements >