HTML Lists

Example: Accessible Feature List

<section aria-labelledby="features-heading">
    <h2 id="features-heading">Course Features</h2>

    <ul>
        <li>Practical examples</li>
        <li>Section-wise quizzes</li>
        <li>Self-paced learning</li>
    </ul>
</section>

The section has an accessible name derived from its heading. The ul identifies the feature collection as a list.

14. Common HTML List Mistakes

Mistake 1: Missing li Elements

<ul>
    HTML
    CSS
    JavaScript
</ul>

This is not the correct structure for a list. Place each item inside an li element.

Correct Version

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Mistake 2: Incorrect Nested Structure

<ul>
    <li>Frontend</li>
    <ul>
        <li>HTML</li>
    </ul>
</ul>

The nested list is outside the Frontend list item. Place it inside the li that represents Frontend.

Correct Version

<ul>
    <li>Frontend
        <ul>
            <li>HTML</li>
        </ul>
    </li>
</ul>

Mistake 3: Using an Unordered List for a Required Sequence

If steps must be completed in a particular order, an ordered list better communicates the sequence.

Mistake 4: Using an Ordered List Only for Styling

Do not choose ol just because you want numbered-looking markers. If sequence is unimportant, use ul and style it with CSS as needed.

Mistake 5: Using dl as a General Layout Container

A description list should represent terms and associated descriptions or values. It is not a generic replacement for div or a general page layout tool.

Mistake 6: Assuming Marker Styling Changes Meaning

Changing an ordered list's markers with CSS does not change its semantic purpose. HTML structure and CSS presentation are separate concerns.

15. Practical Exercises

Exercise 1: Skills List