List Style Attributes

HTML lists have a couple of older, presentational attributes for controlling marker style and numbering — mostly superseded today by CSS, but still worth knowing, especially the ones that remain valid in HTML5.

Syntax

<ol type="I" start="3" reversed>
    <li>Item</li>
</ol>

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

Basic Example

<ol type="A">
    <li>Option A</li>
    <li>Option B</li>
</ol>

Browser output: "A. Option A", "B. Option B" — capital letters instead of numbers, using the still-valid HTML type attribute.

How It Works

Important Attributes / CSS Equivalents

Real-World Example

<style>
    nav ul { list-style: none; padding: 0; margin: 0; }
</style>
<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/cources">Courses</a></li>
    </ul>
</nav>

Removing bullets from a navigation menu entirely with CSS — the underlying <ul> markup, and its accessibility benefits, stay intact even though it visually shows no bullets at all.

Common Mistakes

• Using the obsolete <ul type="square">-style attributes instead of CSS list-style-type
• Assuming that removing bullets with CSS also removes the underlying semantic list structure — it doesn't, and shouldn't

Best Practices

• Use the still-valid <ol> attributes (type, start, reversed) when they genuinely fit the content
• Use CSS for all <ul> marker styling, and for any purely visual list changes generally

Accessibility Considerations

Visually hiding bullets with CSS (as in navigation menus) has no negative accessibility impact, since the real <ul>/<li> structure remains in the HTML for screen readers to announce.

SEO Considerations

No direct ranking effect from list marker styling choices.

Browser & Modern HTML Notes

HTML5 deprecated the old presentational list-styling attributes on <ul>/<li> in favor of CSS, while deliberately keeping <ol>'s type, start, and reversed — these three carry real semantic value (they affect what content actually says, like a legal document's lettered clauses) beyond pure decoration.

Mini Practice

1. Build an <ol> using roman numerals via the type attribute.
2. Remove the bullets from a <ul> using CSS list-style: none; instead of an old HTML attribute.

Module 5 Practice Lab

Quick Practice

Build one ordered list (3 sequential steps) and one unordered list (3 unordered features) on the same page.

Challenge

Take a "list" built from plain paragraphs each starting with a manually typed dash, and rewrite it as a properly nested two-level <ul>.

Mini Project — Course Curriculum Page

Build a course curriculum page: an <ol> of module numbers, each <li> containing a nested <ul> of that module's topics, plus a <dl> at the bottom listing course details (duration, fee, certification) as term/description pairs.

Related HTML Notes

• ordered-list
• unordered-list