HTML

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.

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

1. <!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.
2. <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.
3. <head> … </head>The head holds information about the page rather than the page itself. Nothing in here appears in the window.
4. <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.
5. <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.
6. <body> … </body>The body is the page itself — everything the visitor actually sees goes between these two tags.
7. <h1> · <p>A first-level heading and a paragraph. This is already a complete, valid page.

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.

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.