What is the difference in using <ol> with list-style-type: disc; and <ul>-CodePudding

Sharing a sample snippet. Visually both <ul> and <ol> will look same. Then why do we need <ul> separately?

<head>
    <title>Change Numbering Type in an HTML Unordered List Using CSS</title>
    <style>
        ol {
            list-style-type: disc;
        }
    </style>
</head>
<body>
    <ol>
        <li>Fasten your seatbelt</li>
        <li>Starts the car's engine</li>
        <li>Look around and go</li>
    </ol>
  <hr/>
    <ul>
        <li>Fasten your seatbelt</li>
        <li>Starts the car's engine</li>
        <li>Look around and go</li>
    </ul>
</body>
</html>

CodePudding user response：

Yes, we can change the visual representation of an ordered list using some CSS, as you noted. We can do the same with ul, and make it show decimals. ul { list-style: decimal; }

Ordered and unordered lists are rendered in an identical manner except that visual user agents number ordered list items by default. Sure, we can change the way they appear. However, the semantic meaning expressed by the choice of a list type cannot be changed with CSS.

Assistive technologies include inconsistent support for various uses of the type attribute used to indicate numbering and bullet styles, so for accessibility purposes. Some assistive technologies allow users to navigate from list to list or item to item. Style sheets can be used to change the presentation of the lists while preserving their integrity.

ol { list-style: disc; }


ul { list-style: decimal; }

<ol>
        <li>Fasten your seatbelt</li>
        <li>Starts the car's engine</li>
        <li>Look around and go</li>
    </ol>
  <hr/>
    <ul>
        <li>Fasten your seatbelt</li>
        <li>Starts the car's engine</li>
        <li>Look around and go</li>
    </ul>

CodePudding user response：

That's a good question. Yes, if we add list-style-type: disc; both will looks same. But some beginners doesn't know that. So they will use UL at that place.

Actually you can use list-style-type: to add different kinds in it.

ul.circle {list-style-type: circle;}
ul.square {list-style-type: square;}
ol.roman {list-style-type: upper-roman;}
ol.alpha {list-style-type: lower-alpha;}

<ul class="circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ol class="roman">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="alpha">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

You can use anything that you want for your need.

CodePudding user response：

Semantically, ul is an unordered list and ol is an ordered list. Unless the style has been overridden, ul should give you bullets and ol should give you numbers.

There are accessibility benefits too for certain assistive technologies when the order of the items matter for the user to interpret them correctly.

CodePudding user response：

By default <ul> and <ol> tags as their own list-style-type, when you style it doesn't matter if you are using <ul> or <ol> tag, even you can make <ol> tag as an alphactical or a numerical by their respective styles,

In conclusion when you decide to style them, it really doesn't matter which tag you choose.