HTML · The Smallest Real Web Page and What to Do With It

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.

Naming things is the whole job

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.

index.html

<!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="ko"> 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.

Try it in one minute

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.

HTML — structure What each part is: heading, paragraph, list, button. Written once, and it stays meaningful even with every style stripped away.

CSS — appearance How it looks: colour, spacing, size, layout, and what changes on a small screen. Written in a style block or a separate .css file.

JavaScript — behaviour What happens: reacting to a click, fetching data, changing the page after it has loaded. Written in a script block or a separate .js file.

button.html

<!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.

Open it on your own machine Double-click the file. The address bar shows file:// instead of http://, and everything works except things that need a server. Perfect for learning and for quick experiments.

Serve it to other people Put the file where a web server can read it and it becomes a page anyone can visit. The shell server in the next topic serves exactly this index.html.

Build documents and reports HTML is not only for websites. Email templates, printable reports, e-books and app screens are all HTML underneath, which is why it repays learning once.

Ask an AI for it, then read what you got An AI will happily write a page for you. Knowing these tags is what lets you check the result, fix one line instead of asking again, and tell a good answer from a plausible one.

Next: give it an address

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.

Web Server