Comparing the learning curve of tag-based markup languages with javascript

What are tag-base based markup languages? Markup languages that consist of nested tags with properties. E.g. HTML, XML, SGML
HTML First is based on the dual ideas that 1. HTML is conceptually incredibly easy to grasp and thus to read and understand, and 2. A codebase that prioritises using HTML to define style and behaviour will be accessible to a much wider audience than one that doesn't. This article is an attempt to explore the first claim.
Understanding HTML Structure
Taking this HTML file as an example...

<html>
  <head>
    <title>
      My Web Page
    </title>
  </head>
  <body>
    <div style="color:red">
      Web Page Content
    </div>
  </body>
</html>

The following is the list of rules that one needs to understand in order to read, make sense of, and make changes to, the above document:
- HTML consists of "elements" which can be opened, closed and nested inside each other.
- There are different "kinds" of elements.
- Elements can have properties and those properties can have values. Properties are defined with a property="value" syntax
Understanding Javascript Structure
Unlike HTML rules, javascript has dozens of patterns that need to be understood in order to read, make sense of, and make changes to, a given javascript file.
Declaring a variable
```
let firstName = "Tony";
```
Declaring a function

function hideDiv() {
  console.log('hidden');
}

Arrow Function

const greet = name => `Hello, ${name}!`;

Object Literal

const person = {
  firstName: "John",
  lastName: "Doe",
};

Array Declaration
```
const numbers = [1, 2, 3, 4, 5];
```
Class Definition

class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }
}

Callback Function

function processRequest(data, callback) {
  // Process data
  callback(result);
}

Promise Handling

const fetchData = () => {
  return new Promise((resolve, reject) => {
    // Fetch data
    if (data) {
      resolve(data);
    } else {
      reject("Data not found");
    }
  });
};

Promisifying a callback function

const util = require("util");
const setTimeoutPromise = util.promisify(setTimeout);

Async Functions

async function fetchData() {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

Map Function

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(num => num * 2);

Spread Operator

const array1 = [1, 2, 3];
const array2 = [...array1, 4, 5, 6];

Destructuring Assignment

const person = { firstName: "Alice", lastName: "Johnson" };
const { firstName, lastName } = person;

Template Literals

const name = "Alice";
const greeting = `Hello, ${name}!`;

Async/await with Fetch

async function fetchData(url) {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

Higher-Order Functions

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);

Immediately Invoked Function Expressions (IIFE)
```
(function() {
  // Your code here
})();
```
Event Listeners

document.getElementById("myButton").addEventListener("click", () => {
  console.log("Button clicked");
});

Website Page

Understanding HTML Structure

Understanding Javascript Structure