HTML is the skeleton of every page on the web. CSS gives it skin and clothes, JavaScript makes it move — but HTML is the bones. Get the bones right and the rest of your career as a frontend developer gets dramatically easier. Get them wrong and you spend years fighting inexplicable bugs.
When I started writing HTML in 2020, I thought it was the boring part. The interesting bits were the colors, the animations, the React. Five years later I have a different opinion: HTML is the most important language you'll write, because everything else depends on it. Accessibility, SEO, performance, even how your CSS behaves — all of it traces back to the markup underneath.
This post is the one I wish someone had handed me on day one.
01What is HTML?
HTML stands for HyperText Markup Language. Two ideas live in that name:
- HyperText — text with links in it. The "hyper" part is what made the web a web. Click a word, jump to another document.
- Markup language — a way of marking up text with annotations that describe what the text is. "This is a heading." "This is a paragraph." "This is a link."
That second part is the key insight. HTML doesn't describe how something looks — that's CSS's job. HTML describes what something is. A heading. A list. A button. A form input.
02The anatomy of a tag
An HTML element has three parts: an opening tag, some content, and a closing tag.
<p>Hello, world.</p>
The <p> opens a paragraph. The </p>
closes it. Everything between is the paragraph's content. Some tags
take attributes — extra information inside the opening tag:
<a href="https://saugatrimal.com.np">my site</a>
The href attribute on an <a> tag tells
the browser where to go when the user clicks. We'll come back to
attributes in a minute.
Void elements (the lone wolves)
A handful of elements don't wrap content — they just exist. Images, line breaks, inputs. These don't get a closing tag:
<img src="saugat.jpg" alt="Saugat at his desk">
<br>
<input type="email">03Your first document
An actual HTML page is a stack of tags inside other tags. Here's the smallest one worth writing:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello, world</title>
</head>
<body>
<h1>Hello, world</h1>
<p>This is my first page.</p>
</body>
</html>Let's break it down:
<!DOCTYPE html>— tells the browser "this is modern HTML, render it accordingly". Always start with this line.<html lang="en">— the root element.langtells screen readers and search engines what language the content is in.<head>— metadata about the page. Title, character set, viewport rules, fonts, stylesheets. The browser doesn't show this.<body>— the visible content. Headings, paragraphs, images, everything users see.
Save that as index.html, open it in a browser, and you've
made a web page. Welcome to the club.
04The document tree (DOM)
HTML elements nest inside each other. That nesting forms a tree — the DOM (Document Object Model). Every parent has children; every child has exactly one parent.
You'll hear the words "DOM" thrown around constantly in frontend. It
just means: the live, in-memory tree of elements the browser is
rendering right now. When you write JavaScript that says
document.querySelector('h1'), you're asking the DOM for
the first h1 in the tree.
HTML is a static document. The DOM is the living thing that document becomes once a browser gets hold of it. — a mental model that pays for itself
05Semantic HTML
You can build an entire page with nothing but <div>
tags. It would look fine. But it would be a disaster for
accessibility, SEO, and anyone (including future you) reading the code
six months from now.
Semantic HTML means using the tag that describes the content, not just a generic container. Here's the same page written two ways:
Non-semantic (don't do this)
<div class="header">
<div class="logo">Saugat</div>
<div class="nav">
<div>Home</div>
<div>Work</div>
</div>
</div>Semantic (do this)
<header>
<a href="/">Saugat</a>
<nav>
<a href="/">Home</a>
<a href="/work">Work</a>
</nav>
</header>The second version is shorter, more readable, and — crucially — tells screen readers, search engines, and other developers what each part of the page is for.
Tags worth memorizing
<header>,<nav>,<main>,<footer>— page landmarks.<section>,<article>,<aside>— content regions.<h1>through<h6>— headings in order of importance.<p>,<ul>,<ol>,<li>— flowing text and lists.<a>,<button>,<form>,<input>,<label>— interactive bits.<img>,<figure>,<figcaption>— media.
06Attributes you'll actually use
You don't need to memorize every attribute. You'll reach for these constantly:
class— hook for CSS styles and JavaScript selectors.id— unique identifier; one per page. Used for anchor links and JS.href— destination on<a>.src— source URL on<img>,<script>,<iframe>.alt— text alternative for images. Always on every meaningful image.type— on<input>(text, email, password, number, date…) and<button>.aria-*— accessibility hints when semantic HTML alone isn't enough.
07Common beginner mistakes
- Forgetting
alton images. Empty alt is fine for decorative images (alt=""), but no alt at all breaks accessibility. - Using
<div>for everything. Reach for the semantic tag first; fall back to<div>only when none fits. - Multiple
<h1>s without thinking. Oneh1per page communicates structure clearly.h2–h6follow in nested order. - Skipping heading levels. Don't jump from
h2straight toh4. It confuses screen readers. - Using
<br>for spacing. That's CSS's job.<br>is for actual line breaks inside a paragraph (addresses, poetry).
08What's next
Now that you know what HTML is, the next two skills to pick up are:
- CSS — how to style your markup. Read my CSS intro →
- The DOM & JavaScript — how to make pages respond. Save this for after CSS feels comfortable.
Stop here for now and write something. A short bio. A list of links. A page about your favorite tea. Anything. The fastest way to learn HTML is to keep writing it.
When you get stuck, the MDN HTML reference is the single best resource on the internet. Bookmark it.
And if you'd like more on this stuff, my diary has a steady drip of frontend tutorials. Or just say hi by email — I love chatting with people who are learning.