HTML
The document the web is made of.
HTML tells the browser what each part of a document is — a heading, a paragraph, a link. Learn the eight groups of tags, starting with the smallest page that works.
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 , and they are written between .
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 .
- An HTML file is . Any editor writes it, and the file name ends in .html — nothing needs to be installed.
Your labels say what each part is. That is how a can read your headings to a blind visitor. A can tell your title from your menu, and your styles can dress every heading at once. Sloppy labels still look fine on your screen. But for everyone else, they quietly fail.
The smallest page that really works
There is no shorter honest example than this. Save it as , 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 that behaves differently.<html lang="en">Opens the document and declares its language. use it to pick a voice, and browsers use it to offer translation.<head> … </head>The 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 . Without it, any non-English text can turn into unreadable characters.<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 .<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. In , first choose Format → Make ; in , set the file type to 'All files' when you save. There is no , no 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 well over a hundred , but the eight groups below build almost everything. Learn these 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 ; the text between the tags is what the visitor clicks. |
<img src="..." alt="..."> | An image. is where the file is, and describes it for anyone who cannot see it — including . |
<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 , never to arrange a . |
<form> · <input> · <button> | A form and its parts. This is how a page collects something from a visitor and sends it to a . |
<div> · <span> | Two boxes with no meaning of their own — takes a whole line, sits inside a line of text. 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.
- names one single , and names a group of them. Styles and scripts use these names to find things.
- alt, title and the family describe an element for people who cannot see it. They cost one line and change who can use your page.
Mistakes beginners often make
- Forgetting the closing tag. If </p> or </a> is missing, the browser guesses where it ends, and the rest of the page can turn into one long link.
- Choosing a heading by its size. are levels in the outline, not font sizes. If you want smaller text, change it with .
- Leaving out alt on img. and search engines then know nothing about the picture. If it is only decoration, write alt="".
- A wrong path in href or src. A file in the same folder is just name.html, and a slash in front means the top of the site. When you open the file by double-clicking, that slash points to the top of the and the picture breaks, so leave it out. When a picture does not appear, check the path first.
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 , 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 , wait for 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.