If you've ever opened a website, you've already used HTML — you just didn't know it.
HTML (HyperText Markup Language) is the skeleton of every page on the internet. Before CSS adds color, before JavaScript adds interactivity, there is HTML: plain, structural, and essential.
This guide covers everything you need to understand HTML from the ground up.
What Does HTML Actually Do?
HTML doesn't make things look good. It doesn't add animations. It doesn't process data.
What it does is describe structure and meaning. HTML tells the browser: "this is a heading," "this is a paragraph," "this is a navigation menu," "this is a button." The browser then knows how to handle each piece.
Think of HTML as a blueprint for a building. The blueprint doesn't dictate the paint color or the furniture — it defines what rooms exist, where the doors are, and how everything connects.
The Anatomy of an HTML Document
Every HTML page follows the same basic structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello, World</h1>
<p>This is a paragraph.</p>
</body>
</html>Let's break that down:
- ▸<!DOCTYPE html> — Tells the browser this is an HTML5 document
- ▸<html> — The root element that wraps everything
- ▸<head> — Metadata the user doesn't see (title, charset, links to CSS)
- ▸<body> — Everything the user does see
One rule to remember: every tag that opens must close. <p> opens a paragraph. </p> closes it. A tag left open will bleed into surrounding elements — like a mold without a base.
Tags and Attributes
HTML is built from tags — keywords wrapped in angle brackets. Most tags come in pairs: an opening tag and a closing tag.
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<a href="https://devstiny.com">This is a link</a>
<img src="/image.png" alt="A description of the image">Attributes give extra information to a tag. In <a href="...">, the href attribute tells the browser where the link goes. In <img alt="...">, the alt attribute describes the image for screen readers and search engines.
Semantic HTML: Writing Code That Means Something
Here's where most beginners take a shortcut they later regret.
It's technically possible to build an entire website using only <div> tags. Visually, it might look fine. But to a search engine, a screen reader, or another developer reading your code — it's meaningless noise.
Semantic HTML uses tags that describe what an element is, not just where it sits on screen:
| Non-Semantic | Semantic |
|---|---|
| <div class="header"> | <header> |
| <div class="nav"> | <nav> |
| <div class="main-content"> | <main> |
| <div class="footer"> | <footer> |
| <b>Important</b> | <strong>Important</strong> |
Why does this matter?
- ▸Accessibility — Screen readers use semantic tags to navigate pages for people who can't see them
- ▸SEO — Search engines use heading hierarchy (<h1> through <h6>) to understand page structure
- ▸Readability — Other developers (and future you) can understand the code at a glance
Common HTML Elements You'll Use Every Day
| Element | Purpose |
|---|---|
| <h1>–<h6> | Headings, largest to smallest |
| <p> | Paragraph |
| <a href=""> | Link |
| <img src="" alt=""> | Image |
| <ul> / <ol> / <li> | Unordered/ordered list and list items |
| <div> | Generic container (use sparingly) |
| <span> | Inline container for styling small pieces |
| <button> | Clickable button |
| <input> | Form input field |
| <form> | Groups form elements |
HTML and the Three Layers of the Web
HTML doesn't work alone. Every website is built on three layers that work together:
| Layer | Language | Role |
|---|---|---|
| Structure | HTML | What exists and what it means |
| Presentation | CSS | How it looks |
| Behavior | JavaScript | What it does |
The order matters. You can't style something that doesn't exist. You can't add behavior to an element that isn't in the page. HTML always comes first.
How Browsers Read HTML
When you type a URL and press Enter, here's what happens:
- ▸Your browser sends an HTTP request to a server
- ▸The server responds with an HTML file
- ▸The browser reads the HTML top to bottom and builds the DOM — a tree structure representing every element on the page
- ▸CSS and JavaScript are then loaded and applied on top of that structure
This is why HTML is called the foundation. Everything else is built on it.
What Comes Next
HTML is the first language every web developer learns — and for good reason. It's straightforward, immediately visual, and the gateway to everything else on the web.
Once you understand HTML, you're ready to learn CSS (how to make your pages look the way you want) and JavaScript (how to make them respond to user actions).
The web is built from three languages. HTML is where you start.
Ready to learn HTML through an actual story? In Devstiny, you learn HTML inside The Broken Realm — a world built from code that's slowly falling apart. Start your first chapter at devstiny.com.