HTML 🏛️ HowTo 6 How to Lists

6. How-to Lists

1. How to Create an Unordered List

Use <ul> for bullet-pointed lists where order doesn’t matter.

<ul>
    <li>Learn HTML</li>
    <li>Practice CSS</li>
    <li>Build a website</li>
</ul>

2. How to Create an Ordered List

Use <ol> when items need to be in a specific sequence.

<ol>
    <li>Start with the header</li>
    <li>Add content sections</li>
    <li>Style with CSS</li>
</ol>

3. How to Add Custom Numbering to an Ordered List

Use the type attribute to change how numbers are displayed.

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

4. How to Start an Ordered List at a Specific Number

Use the start attribute in <ol> to set the first number.

<ol start="5">
    <li>Item 5</li>
    <li>Item 6</li>
</ol>

5. How to Create a Descending Ordered List

Use reversed in <ol> for reverse numbering (HTML5).

<ol reversed>
    <li>Last step</li>
    <li>Second last</li>
</ol>

6. How to Nest Lists Inside Each Other

Place one list inside another <li> to create hierarchical structures.

<ul>
    <li>Fruits
        <ul>
            <li>Apple</li>
            <li>Banana</li>
        </ul>
    </li>
</ul>

7. How to Style Lists with CSS

Remove default bullets using list-style: none.

ul {
    list-style: none;
}

8. How to Add a Tooltip to a List Item

Use the title attribute on <li> elements.

<li title="Click for more info">Important point</li>

9. How to Use Data Attributes in Lists

Add custom data for JavaScript interaction.

<li data-id="123">Item with ID</li>

10. How to Set a Specific Value in an Ordered List Item

Use the value attribute on <li> to control numbering.

<ol>
    <li value="10">Starts at 10</li>
    <li>Next item</li>
</ol>

11. How to Make Accessible Lists for Screen Readers

Ensure semantic structure and meaningful text inside list items.

<ul>
    <li>Step one: Read the documentation</li>
    <li>Step two: Write code</li>
</ul>

12. How to Add Links Inside List Items

Place anchor tags within <li> elements for navigation.

<li><a href="post.html">Read this post</a></li>

13. How to Use Classes and IDs in Lists

Apply CSS or JS targeting with class or id attributes.

<ul class="menu" id="main-nav">
    <li class="nav-item">Home</li>
</ul>

14. How to Create a Multi-Page Blog Using Lists

Use lists in your blog index and post pages for navigation.

index.html:

<ul>
    <li><a href="post1.html">First Post</a></li>
</ul>

post1.html:

<ol>
    <li>Outline content</li>
    <li>Write introduction</li>
</ol>

15. How to Use List Items with Nested Content

Include images, links, and sublists inside <li> tags.

<li>
    <img src="image.jpg" alt="Image">
    <p>Description here</p>
    <ul><li>Sub item</li></ul>
</li>

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!