HTML
The document the web is made of.
HTML is not programming. It is a way of writing a document while telling the browser what each part is — this is a heading, this is a paragraph, this is a link. Learn eight tags and you can already write a real page, and everything a browser shows you is one of these files.
HTML is a document with labels on it
HTML stands for HyperText Markup Language. Take an ordinary document and put a label around each part — this line is the title, this block is a paragraph, this word leads somewhere else — and you have HTML. The labels are called tags, and they are written between angle brackets.
The browser does not guess. It makes the text inside a heading tag big and bold because you told it that the text is a heading. This is why HTML is worth learning first: it is the only part of the web where you say what something means rather than how it should look.
- A tag usually comes in a pair: an opening tag and a closing tag with a slash, and the content sits between them.
- Tags can hold other tags. A page is one big box holding smaller boxes, all the way down.
- A few tags stand alone because they have no content to wrap, such as an image or a line break.
- An HTML file is plain text. Any editor writes it, and the file name ends in .html — nothing needs to be installed.
Because your labels say what each part means, a screen reader can announce your headings to a blind visitor, a search engine can tell your title from your menu, and your own styles can target every heading at once. Sloppy labels still look fine on your screen and quietly fail everyone else.
The smallest page that really works
There is no shorter honest example than this. Save it as index.html, double-click it, and a browser shows a real web page. Every large site you have ever visited starts from exactly this skeleton.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My first page</title>
</head>
<body>
<h1>Hello</h1>
<p>This is the first web page I made.</p>
</body>
</html>Line by line
<!DOCTYPE html>Tells the browser this is a modern HTML document. Leave it out and browsers fall back to an ancient compatibility mode that behaves differently.<html lang="en">Opens the document and declares its language. Screen readers use it to pick a voice, and browsers use it to offer translation.<head> … </head>The head holds information about the page rather than the page itself. Nothing in here appears in the window.<meta charset="utf-8" />Says the text is encoded as UTF-8. Without it, any non-English text can turn into rows of question marks.<title> … </title>The title shown in the browser tab, in bookmarks, and as the headline in search results. Write it for a person, not for a robot.<body> … </body>The body is the page itself — everything the visitor actually sees goes between these two tags.<h1> · <p>A first-level heading and a paragraph. This is already a complete, valid page.
Open any text editor, paste those lines, save the file as index.html on your desktop, and double-click it. There is no server, no build step and no installation — the browser reads the file directly. Change a word, save, and press reload to see it update.
The tags you will actually use
HTML has over a hundred tags, and you can build almost anything with these eight. Learn them properly and look the rest up when you need them.
| Tag | What it is for |
|---|---|
<h1> ~ <h6> | Headings, from the most important to the least. Use one top-level heading per page and do not skip levels — the sequence is an outline, not a set of font sizes. |
<p> | A paragraph of text. The browser adds the spacing above and below, so you never need blank lines. |
<a href="..."> | A link. The address goes in the href attribute; the text between the tags is what the visitor clicks. |
<img src="..." alt="..."> | An image. src is where the file is, and alt describes it for anyone who cannot see it — including search engines. |
<ul> · <ol> · <li> | Lists: bulleted, numbered, and the items inside them. Menus and steps are lists, so mark them up as lists. |
<table> · <tr> · <td> | A table: the table itself, one row, one cell. Use it for real tabular data, never to arrange a layout. |
<form> · <input> · <button> | A form and its parts. This is how a page collects something from a visitor and sends it to a server. |
<div> · <span> | Two boxes with no meaning of their own — one takes a whole line, one sits inside a line. Reach for them only when no meaningful tag fits. |
Attributes: the extra information on a tag
An attribute is written inside the opening tag as a name and a value in quotes. It tells the browser something the tag alone cannot.
- href and src carry addresses — the page a link opens, the file an image loads.
- id names one single element, and class names a group of them. Styles and scripts use these names to find things.
- alt, title and the aria- family describe an element for people who cannot see it. They cost one line and change who can use your page.
HTML is the skeleton, not the whole body
A page is made of three languages with three different jobs. Keeping them apart is what makes a site possible to change later.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Button example</title>
<style>
body { font-family: sans-serif; padding: 2rem; }
button { padding: 0.6rem 1.2rem; border-radius: 999px; }
</style>
</head>
<body>
<h1 id="title">Clicked 0 times</h1>
<button onclick="count()">Click me</button>
<script>
let n = 0;
function count() {
n = n + 1;
document.getElementById('title').textContent = 'Clicked ' + n + ' times';
}
</script>
</body>
</html>This one file holds all three. Save it, open it, and click the button — the heading counts up. Try deleting the style block: the page still works, only plainer. That is the point of keeping the three separate.
So what do you do with an HTML file
The same file serves four purposes, and they get progressively more public. Only the second one needs a web server, which is the next topic.
A file on your desktop is a page only you can see. To let anyone else open it, something has to sit on a port, wait for requests and hand the file over. That something is a web server, and you can write one in twenty lines.
You mark this yourself. Nothing is graded here.
Mark this step as understood?
This cannot be undone yet, so mark it only when you really understand.
Marked as understood
You mark this yourself. Nothing is graded here.