Ordered List Vs Unordered List

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

1. Open the editor
2. Write the code
3. 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

1. Susbcribe to news letter
2. Leave a review
3. 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?

Event Bubbling

While going through a course on reactjs I suddenly remembered the concept of event bubbling back from the days of jquery. When an event occurs, it can trigger the handler on current control, plus handler in its parent.

Event bubbling occurs in the order from the target element to the root of the document.

Here is an example of the event bubbling. You can try running from jsfiddle link.

  <div id="parent">

    <div id="child">Click me</div>

  </div>



  <script>

    $(document).ready(function() {

      $("#parent").on("click", function(event) {

        alert("Parent div clicked!");

        // Uncomment the next line to stop event bubbling

        // event.stopPropagation();

      });



      $("#child").on("click", function(event) {

        alert("Child div clicked!");

        // Uncomment the next line to stop event bubbling

        // event.stopPropagation();

      });

    });

  </script>

When you run the script, you will first see “Child div clicked!” alert followed by “Parent div clicked!”.

If you dont want the event to reach parent, you can call event.stopPropagation() on the child event handler.

There is a dirth of information in this stackoverflow thread if you want to dig deeper.

Why Does This Model Exist?

Per W3C document, it is designed with two main goals.

Generic Event System

The first goal is the design of a generic event system which allows registration of event handlers, describes event flow through a tree structure, and provides basic contextual information for each event. More details in this W3C document.

Backward Compatibility

The second goal of the event model is to provide a common subset of the current event systems used in DOM Level 0 browsers. What is DOM Level 0? It doesn’t specifically denote a version of the DOM. Instead, it historically refers to the early days of JavaScript and web development when browsers implemented their own proprietary JavaScript features, and there wasn’t a standardized DOM.

Ending Note

There should always be a reason for any model to exist, be it DOM or the this event model. It will always help in understanding the scripting language better, because we understand the philosophy behind it.