While working with React applications or HTML applications, most of the time I see <ul>. An unordered list. I got curious to know why there is an unordered list and an ordered list, what their use cases are.
Here is a simple use case which gives the gist of their existance.
Ordered List
Lets take an example of a tutorial where the presenter says
- Open the editor
- Write the code
- Run the code
All these steps should be executed in order. Thus it makes sense to put them in a ordered list.
Unordered List
There is no sequence of steps or operations. Presenter says
- Susbcribe to news letter
- Leave a review
- Write a comment
Even if you don’t follow these steps in order, it is fine. They qualify to be in unordered list.
Ending Note
Why am I writing about ordered vs unordered list, though they seem like very basics of HTML? It is because when it comes to coding most of the time I have seen folks switching everything to unordered list. Thought process focuses only on the presentation, but not the element that needs to go with it from HTML standpoint.
When choosing HTML elements, you should consider the purpose and semantics of the content you’re trying to represent. HTML elements are typically chosen based on the type of content you want to display, and they are designed to convey the meaning of the content to both browsers and developers.
Additional Resources
A short guide to help you pick the correct HTML tag
H48: Using ol, ul and dl for lists or groups of links W3 Link
How do you choose the right HTML tags for your web page content?
Technical Thoughts 