Every web page you have ever opened, from a search engine to a recipe blog, arrives at your browser as plain text sprinkled with little labels in angle brackets, like <p> and </p>. Those labels are HTML tags. This page shows how a tag is put together, why the order you close tags in matters, the handful of tags that do most of the work, and how your browser turns all of it into a tree. There's a live editor halfway down, so you can try every idea yourself.

Tags label pieces of text

HTML stands for HyperText Markup Language. "Markup" is the key word: HTML isn't a programming language that calculates things, it's a way of marking up text to say what each piece is. "This is a heading." "This is a paragraph." "This bit is a link to another page."

You do that by wrapping text in tags. Here is the smallest useful example:

<p>Hello, world!</p>

That's three parts. <p> is the opening tag: it says "a paragraph starts here". Hello, world! is the content. </p> is the closing tag: the same name with a forward slash in front, meaning "the paragraph ends here". The whole package, opening tag plus content plus closing tag, is called an element. People often say "tag" when they mean "element"; that's fine in conversation, but the difference helps when you read documentation.

Tags can also carry extra settings called attributes. They go inside the opening tag, after the name, as name="value" pairs. A link needs one to know where it goes:

< 

atag name

 

hrefattribute name

= 

"https://example.com"attribute value, in quotes

> 

Read morecontent (what you see)

</a>closing tag

A few rules of thumb about writing tags:

• Lowercase is the convention. Browsers treat <P> and <p> the same, but everyone writes lowercase.
• Always quote attribute values. Quotes can be left off for simple values, but a value with a space in it breaks without them. Quoting every time means you never have to think about it.
• Some attributes have no value. <input disabled> works on its own: just being present switches the setting on. These are called boolean attributes.
• Extra spaces and line breaks in the text are squashed. Ten spaces in a row show up as one. To force a new line you need a tag (<br>), and for a new paragraph you start another <p>.

Some tags never close

A few elements can't have any content, so they don't get a closing tag at all. An image is an image; there's nothing to put "inside" it. These are called void elements. The ones you'll meet first are:

<img src="cat.jpg" alt="A sleeping cat">   <!-- a picture -->
<br>                                   <!-- a line break -->
<hr>                                   <!-- a horizontal rule (divider) -->
<input type="text">                    <!-- a text box -->
<meta charset="utf-8">                  <!-- info about the page -->

You'll sometimes see these written with a slash, like <br />. In HTML that slash is allowed but does nothing; it's a habit carried over from an older, stricter cousin called XHTML. Also note the <!-- ... --> bits: that's an HTML comment, a note for humans that the browser ignores.

Nesting: tags inside tags

Elements can go inside other elements. A paragraph can contain a bold word, a list contains list items, and a whole section can contain headings and paragraphs. This is called nesting, and the element on the outside is the parent of the ones directly inside it, which are its children.

Nesting has one golden rule: close tags in the reverse order you opened them. Whatever opened last must close first, like stacking plates and taking them off again. Programmers call that a stack: you can only add to the top, and only remove from the top.

<!-- good: em opened last, so it closes first -->
<p>I am <em>so</em> happy</p>

<!-- broken: p closes while em is still open -->
<p>I am <em>so happy</p></em>

Step through a snippet below and watch the stack on the right. Every opening tag goes on top; every closing tag must match whatever is on top right now.

Notice that <br> never lands on the stack. It's a void element, so there's nothing to close later.

The tags that do most of the work

HTML has over a hundred elements, but a small set covers most of what a beginner builds. Here are about ten worth knowing first.

Notice something about that list: tags describe what content is, not how it should look. <h1> means "most important heading", not "big bold text". The looks come from CSS, a separate language for styling. Choosing tags by meaning is called semantic HTML, and it's what lets search engines and screen readers (software that reads pages aloud for blind users) understand your page.

A complete page wraps everything in a standard skeleton. <head> holds information about the page, like its title in the browser tab; <body> holds everything you actually see:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My first page</title>
  </head>
  <body>
    <h1>Hello!</h1>
  </body>
</html>

The first line, <!DOCTYPE html>, isn't really a tag. It's a declaration that tells the browser "this is modern HTML, use today's rules". Leave it out and browsers fall back to an old compatibility mode with some odd layout quirks.

From text to a tree

When the browser receives your HTML, it reads it from top to bottom and builds a tree of elements in memory. Each element becomes a node: a point in the tree with a parent above it and, maybe, children below it. Text becomes its own little node too. This tree is called the DOM, the Document Object Model, and it's what the browser actually draws on screen. It's also what JavaScript changes when a page updates without reloading.

Edit the HTML below. The preview shows what the browser draws; the tree shows how it understood your tags. Try the preset buttons, especially the broken ones.

A few things worth spotting as you play:

• The browser adds what you leave out. Type just Hello and the tree still has html, head and body. Those orange added labels mark elements you never wrote.
• The browser never gives up. Load "crossed tags": you wrote <b>bold and <i>italic</b> text</i>, which breaks the stack rule. Instead of an error, the browser closes the i early and then opens a second i for " text". Look at the tree: there are two i nodes now.
• Some tags can't go inside others. Load "div in p": a paragraph isn't allowed to contain a div, so the browser ends the paragraph before the div starts. The stray </p> at the end then creates a brand new, empty paragraph.

Spot the broken nesting

Your turn. In each snippet, tap the first closing tag that breaks the rule, or tap Looks fine if nothing does. Run the stack in your head: what's on top when you reach each closing tag?

Check yourself

The short version

• HTML marks up text: tags say what each piece of content is.
• An element is an opening tag, its content, and a closing tag with a slash: <p>…</p>. Void elements like <img> and <br> have no closing tag.
• Attributes go in the opening tag as name="value", e.g. href on links and src/alt on images.
• Nesting: close tags in reverse order of opening. Last opened, first closed.
• The browser turns your HTML into a tree called the DOM, adding missing pieces and quietly repairing mistakes, sometimes in surprising ways.

Next time a page looks right but behaves oddly, remember there are two versions of it: the text you wrote, and the tree the browser built. The tree is the one that counts.