HTML Lists

Course Information

<h2>HTML Mastery Course</h2>

<dl>
    <dt>Level</dt>
    <dd>Beginner to Advanced</dd>

    <dt>Learning Format</dt>
    <dd>Self-paced</dd>

    <dt>Topics</dt>
    <dd>HTML elements, forms, semantics and accessibility.</dd>
</dl>

Frequently Asked Questions

A description list can represent question-and-answer relationships, although headings and paragraphs or the details element may be more suitable depending on the desired interaction and content structure.

<dl>
    <dt>What is HTML?</dt>
    <dd>HTML is a markup language for structuring web content.</dd>

    <dt>Is HTML a programming language?</dt>
    <dd>No. HTML is a markup language.</dd>
</dl>

12. Styling Lists with CSS

HTML determines the list's semantic structure. CSS controls the visual presentation, including marker style, spacing, indentation and layout.

In production applications, place reusable styles in a stylesheet rather than repeating inline styles.

Changing Unordered List Markers

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

Common unordered-list marker styles include disc, circle, square and none.

Changing Ordered List Markers

<ol style="list-style-type: upper-roman;">
    <li>Introduction</li>
    <li>Implementation</li>
    <li>Testing</li>
</ol>

CSS list-style-type supports several marker styles, including decimal, lower-alpha, upper-alpha, lower-roman and upper-roman.

Removing Markers for Navigation

<ul style="list-style: none; padding-left: 0;">
    <li><a href="/">Home</a></li>
    <li><a href="/courses/">Courses</a></li>
    <li><a href="/contact/">Contact</a></li>
</ul>

Removing bullets does not remove the list's semantic meaning. This is a common pattern for website navigation.

Advanced CSS: Custom Markers

<ul style="list-style-type: none; padding-left: 0;">
    <li><span aria-hidden="true">✓ </span>Semantic HTML</li>
    <li><span aria-hidden="true">✓ </span>Accessible forms</li>
    <li><span aria-hidden="true">✓ </span>Clean markup</li>
</ul>

The check marks are decorative, so aria-hidden="true" prevents them from being announced as unnecessary content. The text still communicates each item's meaning.

For reusable components, CSS pseudo-elements and the ::marker pseudo-element can provide more maintainable marker styling.

13. Accessibility and Semantic Best Practices

Lists communicate relationships and grouping to browsers and assistive technologies. Correct list markup can make structured content easier to understand.

Choose the list type based on meaning, not merely on appearance.
Use ol when the order matters and ul when it does not.
Use dl for genuine term-description or name-value relationships.
Keep nested lists inside their appropriate list items.
Use meaningful introductory headings when a list needs context.
Do not create a list with arbitrary line breaks and bullet characters when a real HTML list is appropriate.
Do not use lists only to create visual indentation when another semantic structure is more appropriate.