What is HTML?

What you'll learn

What HTML is, what a tag looks like, and how to write a tiny web page that shows up in the browser.

Why it matters

Every website you have ever used, from a school page to YouTube, is built on HTML. If you want to make anything for the web, this is the first brick.

Explanation

HTML stands for HyperText Markup Language. That sounds scary, but the idea is simple: HTML is a way of labelling the parts of a page so the browser knows what each part is.

You label things with tags. A tag is a word inside angle brackets, like <p>. Most tags come in pairs: an opening tag <p> and a closing tag </p>. Whatever sits between them gets the label.

Together, an opening tag, its content and the closing tag are called an element.

<p>Hello, world!</p>

Every complete page has the same basic shape: a <!doctype html> line, an <html> element, a <head> for information about the page, and a <body> for everything people can see.

Example

<!doctype html>
<html>
  <head>
    <title>My first page</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is my very first web page.</p>
  </body>
</html>

Step-by-step walkthrough

1. <!doctype html> tells the browser "this is a modern HTML page".
2. <html> wraps the whole page.
3. <head> holds things people do not see on the page itself. <title> is the text on the browser tab.
4. <body> holds everything that is shown in the window.
5. <h1> is the main heading. <p> is a paragraph.
6. Each opening tag has a matching closing tag, with a / in it.

Try it yourself

Change the heading and the paragraph, then press Run. Try adding a second <p> with your own sentence.

Common mistakes

• Forgetting the closing tag. Writing <p>Hello without </p> can make the rest of the page behave strangely.
• Mixing up < and >. Tags always start with < and end with >.
• Putting visible text in <head>. Only the <body> is shown on the page.
• Wrong slash. The closing tag uses a forward slash: </p>, not <\p>.

Quick quiz

Summary

• HTML labels content using tags; tag + content + closing tag = an element.
• A page has <html>, a <head> and a <body>.
• Visible content lives in the <body>.

Next up: headings, paragraphs and text styling.