The Markup Language Per Se
To start with, let's understand what is HTML. In case you are new to webdev, HTML is the abbreviation of Hyper Text Markup Language and Hyper Text is simply a fancy term to describe hyperlinks - when you click on a hyperlink, the page will be redirected to its destination - the url attached to that hyperlink.
At the end of the day, HTMLs are just documents written with markup language which have hyper text in them.
Wait... so if I don't put even one line of hyper text in an HTML document, should it still be called as HTML?
Anyway, explaining the definition of Hyper Text is not really the purpose of this article, so let's focus on the second half of HTML - the markup language.
According to Cambridge dictionary, here's the definition of markup:
the symbols used in some types of computer documents that control the way text appears on a screen or page, or the process of adding these symbols
If it is a bit difficult to understand by readiing its defination, I will give you an example.
For those who are completely new to HTML, the following piece of code is a typical HTML document
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The title of the page</title>
</head>
<body>
<h1>TODO LIST</h1>
<ul>
<li>get hydrated</li>
<li>eat healthy</li>
<li>sleep well</li>
</ul>
<p>Add more <strong>todo</strong> <em>if you want...</em></p>
</body>
</html>
If you open it with a browser, this will show up
By the way, if I use the term HTML tags I am referring to the tags inside the<body>, which are the actual contents being displayed on screen.
<body>
<h1>TODO LIST</h1>
<ul>
<li>get hydrated</li>
<li>eat healthy</li>
<li>sleep well</li>
</ul>
<p>Add more <strong>todo</strong> <em>if you want...</em></p>
</body>
Look carefully and you will notice there is a relationship between each HTML tags and the style of the contents being displayed.
You may ask: "So basically if I put <strong></strong> around some text, it will be displayed as bold font?"
<strong>todo</strong> <-This turns bold?
That's right, if you want turn some text bold, simply wrap it with a opening tag <strong> and a closing tag <strong/>. This is very similar to how editors mark their manuscripts decades ago. The difference is those old-fashioned markup languages are for publishers, and the markup language we are reading right now is for browsers.
Served as the foundation of modern web applications, HTML tags has three crucial functionalities:
- It applies a set of pre-defined style to a distinguished text, and controls the way it appears on screen.
- It distinguishes a piece or a paragraph of text from another one.
- It specifies the relationship between those distinguished texts.
The Problem with "Learning HTML"
Let's go back to the question when we started, do you still need to learn HTML in 2024?
The short answer is no, even if you do, you should spend less than 30 minutes on it.
I have seen a lot of webdev beginner course out there, start with HTML by literally telling people how does a HTML tag change the appearance of a piece of text, one after another. If you are following tutorials that teach you how does a <h1> tag change the size and font-weight of a heading text, or even trying to memorise any of the pre-defined styles in provided by HTML tags, stop it.
Because the pre-defined styles do not matter anymore, mainly for two reasons:
1. Native HTML, they are just not good-looking.
The first version of HTML was published in 1993, and this is its specifications when it first released.
Back in 1993, all the interactive components you are familiar with does not exist, as javascript isn't released until 1995. I guess the lack of interactivity wasn't a big deal because people at that moment mainly use the internet for information exchange. I haven't even born in 1993 so I don't want to make things up, but you get the idea.
The default styling provided by HTML might be enough in 1993, but they look very primitive from today's perspective. Some may argue that's the matter of aesthetics, I agree but HTML tags not only controls how the element look, they also add extra space around the text, which leads to the second reason of why you shouldn't "learn" HTML.
2.Frontend libraries remove all the default styles
If you have tried to create some website with plain HTML and CSS, the following case might be familiar to you.
Here is a very simple CSS syntax, don't worry if you have never see them before
li {
margin-left: 100px;
}
The "li" before the curly-braces is an css selector, and the key-value pair inside the curly-braces specifies the style to be applied to the selected element. In the above example, we are telling the brower to select all <li> elements, and add 100 pixel unit of spacing (margin) to the left side of them.
If we apply the above CSS code to the simple HTML todo list we created earlier, it turns into something like this
Which should be exactly reflecting the changes we apply to it...?
If you open the developer tool you will notice that is not the case:
(The tiny dialog box on top of it shows the size of the actual <li> element, not the size of the orange area)
The space highlighted in orange colour is indeed 100 pixel, but the <li> elements have been moved to the left more than we expected.
What happened? If we go look for their parent - the <ul> element, it seems the parent element also added some space to the left:
But we are not done yet, if we look really carefully...There are still some tiny space between the <ul> and the border of the window.
The body element itself, added 8 pixels of margin too, so the actual space added to a <li> element would be 8 + 40 + 100 = 148px.
What's even worse about default styles is that each element has their own values. For example by default, a <h1> element will add 21.44px of space at the top and bottom of it, but that value becomes 19.92px for <h2>, and 16px for <p>.
So what if I want my list elements to precisely, have 100px of spacing on their left? Do I have to memorise all of the default values and do some arithmetics before I code?!
Technically you can do that, but web programming will be too hard for everyone if that's the case, here's an easier way you can move the list element to the left by 100px: explicitly reset the space around the parent elements to 0.
body {
margin-left: 0;
}
ul {
padding: 0;
}
li {
margin-left: 100px;
}
After adding those lines, our li elements are precisely 100px away from the left border of the window.
By the way, if reset the space around of each elements one by one sounds too much work for you, we can simply reset all of them like this:
* {
margin: 0;
padding: 0;
}
In fact, most frontend libraries in 2024, like tailwindcss do that for you by default. That's why you really don't have to learn how native HTML tags change the appearance of your page anymore.
What do you really need to know about HTML
In many natural languages, we tend to put dialogue between "quotes", to let the readers know, those sentences wrapped by quotes are different. Putting some context between some pair of symbols to make it different from others, is a very common linguistic mechanism.
That's also why HTML tags will never be replaced, as long as we are still coding with some sort of "programming language", we will need those symbols to distinguish one piece of text from another.
One application of this distinguishing mechanism is DOM manipulation. In terms of web development, DOM manipulation is simply a fancy way to describe how we developers use javascript to read and control the HTML document.
In order to read or control any element in the HTML document, we first have to know which element do we want to interact with.
We can do this by selecting elements with their HTML tag like this:
const targetElement = document.querySelector("p");
//Print the paragraph in the developer console.
console.log(targetElement.innerText);
//Replace the paragraph to "hinzik"
targetElement.innerText = "hinzik";
However, using tag names are not very useful in most of the time. As there could have multiple paragraphs on one page but we only want to read the content from one of them.
Assigning a class or an id attribute to a HTML element would be a better solution.
<p id="hinziks-message">my message</p>
<p class="messages">random Message</p>
By doing that, we can easily select the right message:
const myMessage = document.querySelector("#id");
const randomMessage = document.querySelector(".messages");
The above operations cannot be achieved without HTML tags. and that's how we use HTML tags in 2025.
To conclude, the most important fact about HTML you need to know in your beginner stage is
Javascript engines use HTML tags to identify which element is which.
Although there are still a few extra things you will have to grasp, you can learn those on your way of learning JavaScripts.
The main purpose of this article is not to discourage you from learning HTML, but to prevent you from making the same mistake I made.
When I first started learning webdev, I spent hours after hours on how each HTML tags works. I literally read pages after pages of documents on MDN web docs, I tried to memorise the properties of every HTML tags I can find. I thought that would make me a better developer, but the truth is, it doesn't. I would never do that again if I could start over, don't waste your time on HTML.
End.