List Style Attributes

Understand which list attributes remain valid in HTML5 and why styling lists now requires CSS instead of legacy attributes.

What it is

In early HTML versions, developers used specific attributes directly on <ul> and <ol> tags to control bullet styles and numbering. Today, most of these attributes are obsolete or deprecated. The only widely supported attribute remaining for ordered lists is start, which defines the first number in the sequence. For unordered lists, there are no valid style attributes left in HTML5; all visual customization must be handled via CSS.

Related terms: Deprecated attributes, CSS pseudo-elements, semantic markup.

Why it matters

• Standards Compliance: Using obsolete attributes can cause validation errors and inconsistent rendering across modern browsers.
• Separation of Concerns: Moving styling to CSS keeps HTML structure clean and makes design changes easier to manage globally.
• Accessibility: Properly structured HTML with CSS styling ensures screen readers interpret list semantics correctly without confusion from non-standard attributes.
• Maintainability: CSS allows for complex styling (like custom images or counters) that simple HTML attributes never could support.

Syntax or steps

For ordered lists, use the start attribute if you need to begin numbering at a value other than 1. Do not use type or compact. For unordered lists, do not use type or disc/circle/square as attributes. Instead, apply CSS rules to the <ul> element using properties like list-style-type.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  /* Correct way to style unordered lists */
  ul.custom-bullets {
    list-style-type: square;
  }
  
  /* Optional: Custom marker using CSS */
  ul.custom-image {
    list-style-image: url('bullet.png');
  }
</style>
</head>
<body>

  <!-- Valid HTML5: Start attribute is allowed -->
  <ol start="5">
    <li>Fifth item</li>
    <li>Sixth item</li>
  </ol>

  <!-- Invalid/Obsolete: type attribute is deprecated -->
  <!-- <ul type="square">...</ul> -->

  <!-- Correct: Use CSS classes for styling -->
  <ul class="custom-bullets">
    <li>Square bullet</li>
    <li>Another square bullet</li>
  </ul>

</body>
</html>

The <ol start="5"> tag correctly begins the list at number 5. The <ul class="custom-bullets"> uses a CSS class to change the bullet shape to squares, replacing the old type="square" attribute approach.

Common mistakes

• Using type on <ul>: This attribute is obsolete. Browsers may ignore it or render inconsistently. Always use CSS list-style-type.
• Assuming start works on <ul>: The start attribute is only meaningful for ordered lists (<ol>). It has no effect on unordered lists.
• Overusing inline styles: While style="list-style-type: circle;" works, it is better practice to define reusable classes in your stylesheet rather than cluttering HTML with inline CSS.

When to use it

Practice

Guided Exercise: Create an ordered list that starts at number 10. Then, create an unordered list where the bullets are circles using CSS.

Challenge: Modify the unordered list so that the bullets are removed entirely (none) and replaced with a custom character "→" using CSS content properties.

Hint: Look up list-style-type: none; combined with li::before { content: "→ "; }.

Quick check

Question: Is the type attribute valid for styling <ul> elements in HTML5?

Answer: No, it is obsolete. You must use CSS list-style-type instead.

Summary

HTML5 retains the start attribute for ordered lists but removes styling attributes for both list types. All visual customization for lists should now be handled through CSS to ensure standards compliance and maintainable code.