Why do people find HTML easier than JavaScript?

A lot of people—especially beginners—find HTML significantly easier than JavaScript. And that's OK! I feel the same, and there's a reason for it. And don't worry: I'm not about to become a JS brogrammer who tells you that HTML and CSS aren't real programming languages. Fuck those guys.

HTML is declarative

The beautiful thing about HTML is that it's declarative. You just tell the browser what should appear on the page, and it makes it happen. If I want to add a top-level heading to the page, all I need to do is include an H1 element:

<h1>This is my top-level heading</h1>

There are no complicated steps in which I need to tell the browser exactly how to create this element, what it should do, or what kind of content it describes. That's all taken care of for me automatically.

JavaScript is imperative

JavaScript, on the other hand, is imperative in its nature. You have to explicitly tell it what it needs to do and how it should do it. If I want my H1 element to show its text content when clicked, I have to manually set that up:

// Select the heading
var heading = document.querySelector("h1");

/**
 * Log an element's text content
 */
function logText () {
  console.log(this.textContent);
}

// Log the heading's text content on click
heading.addEventListener("click", logText);

This is a simple example, but it's inherently more difficult. It requires you to think through the logic and implementation of the code.

It also requires more technical knowledge. Even for a simple example like this, you have to know how to:

Create a variable
Select an element from the DOM
Write a function
Log data to the console
Add an event listener

This is what JavaScript frameworks try to solve

I think it's fair to say that pretty much everyone finds HTML easier than JavaScript. There's absolutely no shame in that.

The entire point of modern JavaScript frameworks is to make JavaScript applications more declarative, like HTML. Instead of writing all the complex DOM manipulation yourself, you hand that off to the framework.

You tell the framework what your application should look like based on its current state. Then the framework handles all the DOM interactions for you whenever the state changes.

If you want to go down this route, I recommend a much more lightweight library like Reef. That's my personal favourite, but there are other good ones like Alpine, Preact, and Svelte.

For more on state-based UI, check out these posts from my friend Chris Ferdinandi:

There's no shame in preferring HTML and CSS

If you prefer working with HTML and CSS, embrace it. Don't feel forced into JavaScript by the dickhead brogrammers. We need more experts in HTML, CSS, A11Y, UX, and UI!

Those who say HTML and CSS aren't real programming languages tend to be absolutely dog shit at them. Just ask them to center an element on the page and watch them squirm.

Be proud of your unique skills!