What is HTML, and what does a browser do with it?

What the letters stand for

HTML is short for HyperText Markup Language, and the name is a fairly honest description. Hypertext is text with links to other text; links are the reason separate documents add up to a web. Markup means you wrap labels around your content to say what each piece is, so a line becomes a heading and five lines become a list. And it is a language because there is a fixed vocabulary of labels that every browser agrees on.

Put together, HTML describes what content is. It says "this is the main heading" or "these three items belong in a list". It has no opinion about colours, fonts or animation, which other languages handle. If a web page were a house, HTML would be the rooms and walls, before anyone picks the paint.

The file itself is plain text with a name ending in .html. Notepad can write one. Any browser can open it, and you install nothing.

Where HTML came from

Tim Berners-Lee (opens in a new tab) invented HTML at CERN, the European physics lab near Geneva, in 1990 and 1991. He wanted researchers to share papers that linked to one another, so he also wrote the first browser and the first web server. That first version had about a dozen tags, mostly headings, paragraphs, lists and links.

The 1990s were messy. Browser makers bolted on features in a race with each other, and numbered versions followed: HTML 2.0, 3.2 and 4.01. In the early 2000s XHTML tried to impose stricter rules, and most of the web ignored it. HTML5 then added native video and audio, new form inputs and layout tags with real meaning, such as <header>, <nav> and <main>.

There are no numbered releases any more. A group called WHATWG, backed by Apple, Google, Mozilla and Microsoft, maintains the HTML Living Standard (opens in a new tab) and edits it whenever something changes. When someone says "HTML5" today, they mean current HTML.

How a browser reads HTML

From the moment you press Enter to the moment the page appears, the browser goes through four steps, usually in well under a second:

1. It downloads the file from a server, or opens it from your disk, and gets plain text.
2. It parses the tags and builds a tree of objects in memory called the DOM (Document Object Model). Each element becomes a node, and an element nested inside another becomes its child.
3. While parsing, it spots references to other files (images, stylesheets, scripts) and requests those as well.
4. It combines the DOM with the styles, calculates where every box goes and paints the result on screen.

Browsers are extremely forgiving. Forget a closing tag and the parser follows precise repair rules from the standard instead of showing an error. Handy at first, but your mistakes stay hidden. A page can look perfect while the tree underneath is wrong, and screen readers and search engines read the tree, not the screenshot. Paste your page into the free W3C Markup Validation Service (opens in a new tab) now and then and it will list every repair the browser made without telling you.

Tags, elements and attributes

These three words get used interchangeably in tutorials, and they mean slightly different things.

A tag is a name in angle brackets. Most tags come in pairs: an opening tag such as <p> and a closing tag such as </p>, with a slash. The element is the whole package, meaning opening tag, content and closing tag.

<p>This whole line is a paragraph element.</p>

A few elements have no content and so no closing tag. These are void elements: <img>, <br> and <input> are the ones you will meet first.

An attribute gives an element extra information. It sits inside the opening tag as a name, an equals sign and a quoted value:

<a href="https://example.com">Visit Example</a>
<img src="cat.jpg" alt="A grey cat asleep on a sofa">

In that snippet href is the link's destination, src names the image file and alt describes the picture for anyone who cannot see it. Elements also go inside other elements, which is called nesting, and the inner one has to close first. <p><strong>Hi</strong></p> is right. Close the <p> first and it is wrong.

You can practise both ideas, with instant feedback, in the lessons on tags and elements and attributes.

A first page you can write in ten minutes

Every full HTML document has the same skeleton. Here is a short one that is nonetheless complete:

<!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>This is my first web page. I am learning HTML.</p>
    <ul>
      <li>Headings</li>
      <li>Paragraphs</li>
      <li>Lists</li>
    </ul>
  </body>
</html>

Line by line: <!DOCTYPE html> switches the browser into modern standards mode. It is a declaration and not a tag, but it must come first. <html lang="en"> wraps the whole document and tells screen readers and translation tools which language the page is in. Inside <head> goes information about the page, here the character encoding, the mobile viewport setting and the title that shows in the browser tab and in search results. Everything visible lives in <body>, which in this case holds a heading, a paragraph and a three-item list.

Save it as index.html and double-click the file, or paste it into the playground. An online editor with live preview, such as HTML Code Editor (opens in a new tab), works too. For a slower walk through each line, see the page skeleton lesson.

The dozen or so elements you will use every day

The standard defines more than a hundred elements. A normal page uses perhaps fifteen of them, and these are the ones to learn first:

Pick each element for what the content is, never for how it looks. A line gets an <h2> because it heads a section, and if you only want large bold text, that is a job for CSS. This habit has a name, semantic HTML, and screen readers and search engines both depend on it. The reference has a page for each element, for example a and img, and the cheat sheet fits on one screen if you want it open while you work.

Four things HTML does not do

Beginners tend to arrive with a few wrong ideas, and it saves time to drop them early.

HTML is not a programming language. It has no variables, loops or if-statements and cannot add two numbers. It describes content, and every website on the internet still runs on it, so there is no shame in that.

It is not for styling either. Old tutorials still show <font> and <center>; both are obsolete, and colours, fonts and layout now belong in CSS.

Behaviour is mostly someone else's job too. A menu that slides open or a game that reacts to arrow keys needs JavaScript. HTML does have some built-in behaviour, such as form validation and the <details> disclosure widget, but anything with real logic needs a script.

Finally, HTML is not the same thing as a website builder. Builders write HTML for you, and a visual editor such as the html6.com WYSIWYG editor (opens in a new tab) will show you the tags behind your formatted text. When the output breaks, though, you need to read HTML to fix it.

Most pages use all three languages: HTML for content, CSS for presentation, JavaScript for behaviour. The HTML vs CSS vs JavaScript guide shows how they split the work, and module 9 of the course, which opens with the style attribute, teaches enough CSS to make your pages presentable.

Where to go from here

Write a little HTML every day and look at the result straight away. Reading about it helps far less. We suggest this order:

1. Begin with What HTML Is and finish module 1, which ends with a complete page.
2. Move on to text: headings, paragraphs and lists.
3. Add links and images, then semantic layout, tables and forms.
4. End with metadata, accessibility and a little CSS, and build the final projects.

Lessons take about five minutes each and check your code automatically. At the end of every module, close the lesson and try to rebuild its project from memory in the playground. You will find out quickly what stuck.