What Is HTML and How Does It Structure a Web Page?
HTML (HyperText Markup Language) is the markup language that gives a web page its structure and content. It tells a browser what each piece of a page is — a heading, a paragraph, a link, an image — rather than how it should look. If you want to understand how any website is built, HTML is the starting point: it's the skeleton that CSS styles and JavaScript animates. This explainer covers what HTML is, how tags and attributes work, how a browser turns it into a visible page, and where you can see it in the wild.
What HTML actually does
HTML is not a programming language. It doesn't perform calculations, make decisions, or run loops. It's a markup language: you wrap content in labels that describe its meaning and role.
That distinction matters. When you write <h1>Welcome</h1>, you're not saying "make this big and bold." You're saying "this is the top-level heading of the page." The browser decides the default appearance, and CSS can override it later. This separation — structure in HTML, presentation in CSS, behavior in JavaScript — is the core organizing principle of the modern web.
Elements, tags, and attributes
An element is the complete unit: an opening tag, the content, and a closing tag. A tag is the label itself, written between angle brackets. An attribute is extra information placed inside the opening tag.
Here's a simple example:
<h1 class="page-title">Welcome to My Site</h1>
<p>This is a paragraph of text with a <a href="https://example.com">link</a> inside it.</p>
<img src="photo.jpg" alt="A description of the photo">
Breaking that down:
| Part | Example | What it does |
|---|---|---|
| Opening tag | <h1> |
Marks where the element begins |
| Attribute | class="page-title" |
Adds extra info the browser or CSS can use |
| Content | Welcome to My Site |
The actual text or media |
| Closing tag | </h1> |
Marks where the element ends |
A few things to notice. The <a> element uses an href attribute to say where the link points. The <img> element has no closing tag — it's a void element, because it holds no text content. And the alt attribute on the image provides a text alternative, which matters for accessibility and for when the image fails to load.
How a browser reads HTML and renders a page
When you visit a URL, the browser receives the HTML as plain text and works through it in a defined sequence:
- Parsing — The browser reads the markup top to bottom and builds a tree structure called the DOM (Document Object Model). Each element becomes a node in that tree.
- Applying CSS — Stylesheets are matched against the DOM to determine how each element should look.
- Layout — The browser calculates where each element sits and how much space it takes.
- Painting — Pixels are drawn to the screen.
The key insight is that the HTML you write is not the page you see. It's a set of instructions the browser interprets. Two browsers given identical HTML will produce nearly identical structure, but their default styling and rendering details can differ slightly — which is one reason developers test across browsers.
How HTML, CSS, and JavaScript divide the work
A typical site uses all three languages, each with a distinct job:
- HTML — structure and content. "This is a heading. This is a list. This is a form field."
- CSS — presentation. "Headings are dark blue, 32px, with 16px of space below."
- JavaScript — behavior. "When the user clicks this button, load more content."
You can build a perfectly readable page with HTML alone. Add CSS and it becomes visually designed. Add JavaScript and it becomes interactive. The same HTML can be restyled completely without touching its structure — which is why the separation is worth respecting rather than inlining styles and scripts everywhere.
Where to see HTML in practice
You don't need any tools to inspect a page's HTML:
- View source — Right-click anywhere on a page and choose "View Page Source" (or press
Ctrl+Uon Windows/Linux,Cmd+Option+Uon Mac). This shows the raw HTML the server sent. - Developer tools — Right-click an element and choose "Inspect." This opens the live DOM, which may differ from the raw source because JavaScript can modify it after the page loads.
Comparing the two is instructive. The raw source is what the server delivered; the inspected DOM is what the browser actually built. On a JavaScript-heavy site, they can look quite different.
A note on where this fits
HTML is the entry point to web work, but it's rarely used in isolation. If you're learning to build for the web, expect to pick up CSS and JavaScript alongside it. If you're simply trying to understand how a site you admire is put together, viewing its source and inspecting elements will show you the HTML structure directly — and that's often the fastest way to connect the abstract markup to a real page.