What is HTML?
HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. Every page you have ever visited — from a simple personal blog to a complex web application — is built on HTML.
The name says a lot. HyperText means text that links to other text, the idea that made the web possible: documents connected by links. Markup means you wrap content in tags that describe what it is. Language means there are rules and a shared vocabulary — though HTML is not a programming language.
When you write HTML you are describing the structure and meaning of a document: which part is a heading, which is a paragraph, which is a navigation menu, where an image goes and how a form is laid out. The browser reads your HTML and turns it into the page people see. Nothing on the web exists without it.
The best way to think about HTML is as the skeleton of a page. It decides that there is a heading here, a paragraph there, an image, a link and a form — but it says nothing about colour, size or position. That separation is deliberate: structure belongs to HTML, appearance belongs to CSS and behaviour belongs to JavaScript. Because each layer has one job, pages stay easier to build, test and maintain, and a change to the design never forces you to rewrite your content.
How HTML works
HTML is made of elements. An element is a piece of content wrapped in tags. A tag is written between angle brackets, and most elements have an opening and a closing tag:
// index.html
<p class="intro">Hello, world!</p>Breaking that down:
<p>is the opening tag and</p>is the closing tag.pis the element name — a paragraph.class="intro"is an attribute: extra information about the element.Hello, world!is the content.
Some elements are void elements with no content and no closing tag, such as <img>, <br>, <input> and <meta>. Others nest inside each other to form a tree, which is exactly what the browser builds as it parses your file.
When a browser loads an HTML file it parses the markup from top to bottom and builds the DOM (Document Object Model) — a tree of objects representing your page. CSS then styles that tree, and JavaScript can read and modify it. That is the whole web platform in one sentence.
Because the DOM is a tree, every element has a parent and can have children. The <body> element contains your headings and paragraphs, and each of those can contain links, images and text. When JavaScript later adds or removes an element, it is editing this same tree — which is why understanding the DOM makes the rest of frontend development much easier.
The anatomy of an HTML document
Every HTML page follows the same basic skeleton:
// index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My first page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>I am learning <strong>HTML</strong>.</p>
</body>
</html>Each part has a job:
<!doctype html>tells the browser to use standards mode.<html lang="en">is the root element; thelangattribute declares the page language for screen readers and search engines.<head>holds metadata that is not displayed — character set, viewport, title and links to CSS.<title>is the name shown in the browser tab and in search results.<body>contains everything the user actually sees.
Writing your first HTML page
The fastest way to understand HTML is to write it. Create a file called index.html, paste the skeleton above, and open it in your browser. You have just built a web page.
From there, build up one element at a time:
- Add an
<h1>for your page title and a<p>for an introduction. - Add a link with
<a href="https://example.com">Example</a>. - Add an image with
<img src="photo.jpg" alt="A description" />. - Group content with
<header>,<main>and<footer>. - Open the file again — the browser updates instantly with every save.
You do not need any tools, frameworks or build step to start. A text editor and a browser are enough. That low barrier is exactly why HTML is the best first language for anyone entering web development.
Semantic HTML: the difference between a div and an article
You can build an entire page out of <div> elements, but you should not. Semantic HTML means choosing elements that describe their meaning:
<header>,<nav>,<main>,<aside>,<footer>— page landmarks.<article>— a self-contained piece of content.<section>— a thematic grouping of content.<figure>and<figcaption>— media with a caption.<time>,<mark>,<address>— content with a specific meaning.
Compare a vague structure:
<!-- bad.html -->
<div class="header">
<div class="nav">...</div>
</div>
<div class="content">
<div class="post">...</div>
</div>with a semantic one:
<!-- good.html -->
<header>
<nav>...</nav>
</header>
<main>
<article>...</article>
</main>They can look identical, but the semantic version tells screen readers, search engines and other developers exactly what each part is. It is one of the highest-leverage habits in frontend development, and it costs nothing to adopt from day one.
HTML forms and user input
Forms are how users send data to a server — logins, searches, checkouts and sign-ups. The <form> element wraps inputs, and <label> connects a description to each control:
<!-- subscribe.html -->
<form action="/subscribe" method="post">
<label for="email">Email address</label>
<input id="email" name="email" type="email" required />
<button type="submit">Subscribe</button>
</form>HTML5 added many input types — email, url, number, date, range, color, search — plus built-in validation attributes such as required, minlength, pattern and min/max. Always pair inputs with labels: it is required for accessibility and makes forms usable with a keyboard and a screen reader.
HTML vs HTML5
| Feature | HTML (4.01) | HTML5 |
|---|---|---|
| Semantic tags | Limited | header, nav, article, section, aside, footer, main |
| Media | Plugins required | Native <audio> and <video> |
| Graphics | None | <canvas> and <svg> |
| Input types | Basic | email, date, range, color and more |
| APIs | Minimal | Storage, geolocation, drag & drop, offline |
| Doctype | Long and complex | Simple <!doctype html> |
Accessibility and SEO start with HTML
Two of the most important goals in web development are decided largely by your HTML.
Accessibility depends on meaningful markup: a logical heading order, alt text on images, labels on form controls, landmark elements and sufficient contrast. Assistive technology navigates your page the same way a search engine reads it — through the structure. A screen reader user can jump between landmarks and headings precisely because the HTML says what each region is.
SEO starts with HTML too. A single descriptive <h1>, a well-written <title> and meta description, descriptive link text, structured data, and fast, crawlable markup all help search engines understand and rank your content. No amount of JavaScript fixes a page with broken HTML semantics.
Best practices
Good HTML is not about memorising tags — it is about choosing the right element for the job and keeping the document clean. These habits take seconds to apply and pay off for the life of a project:
- Use semantic elements instead of
<div>soup. - Keep one
<h1>per page and never skip heading levels. - Always set
langon<html>. - Add meaningful
alttext to images, and usealt=""for purely decorative ones. - Connect every form control to a
<label>. - Use descriptive link text — never “click here”.
- Validate your markup with the W3C validator.
- Prefer progressive enhancement: the page should work before JavaScript.
- Keep the document structure shallow and readable.
Common mistakes
- Building everything with
<div>and<span>. - Multiple
<h1>s or skipped heading levels. - Missing or lazy
alttext. - Vague link text such as “read more”.
- Using deprecated tags like
<center>and<font>. - Forgetting the
langattribute. - Heavy inline styles instead of CSS.
- Unlabelled form inputs.
Is HTML still worth learning in 2026?
Absolutely. HTML is not going anywhere. Every framework — React, Vue, Svelte, Astro and Next.js — ultimately renders HTML that the browser displays, so when you write a component you are still describing structure. Developers who understand HTML write more accessible, faster and more search-friendly interfaces, because they know which element to reach for instead of rebuilding everything from generic containers. As a first language it is also unbeatable: you can see results within minutes, with no tooling or build step, and every later skill in web development builds on the foundation it gives you. Learn it properly once and you will use it for the rest of your career.
How to learn HTML
HTML is the easiest web technology to start and one of the easiest to underestimate. A practical path:
- Learn the document skeleton and the most common elements.
- Build a simple page with headings, paragraphs, links, lists and images.
- Learn semantic elements and use them in real layouts.
- Practise forms, labels and validation.
- Study accessibility basics and audit your pages.
- Validate your HTML and fix the warnings.
- Build small projects — a profile page, a blog layout, a landing page — until the tags feel automatic.
From there, move on to CSS, then JavaScript, then a framework. Our interactive HTML tutorial walks you through every step with hands-on exercises.