Elements, Tags, and the Ones That Never Close

HTML marks text up by wrapping it. The wrapper says what the text is.

<p>This is a paragraph.</p>│ │ └──────┬──────────┘ └┬─┘│ │        │             └── closing tag│ │        └── content│ └── element name└── opening tag starts here

The three parts together are the element. The angle-bracket bits on either end are its tags. People say "the p tag" when they mean the whole element, and that is fine in conversation — but the distinction matters the moment you read an error message.

Element names are case-insensitive, so <P> and <p> are the same element. Write them lowercase anyway; it is the universal convention and mixed case reads as a mistake.

An attribute adds information to an element, and it goes inside the opening tag — never the closing one.

<a href="/about">About us</a><img src="cat.jpg" alt="A cat asleep on a keyboard"><p class="intro" id="lead">Some text.</p><input type="email" required>

A handful of elements have no content — they are not wrappers, they are markers. They take no closing tag, and writing one is an error.

<img src="photo.jpg" alt="Description"><br><hr><input type="text" name="email"><meta charset="utf-8"><link rel="stylesheet" href="styles.css">

There are thirteen in total and those six are the ones you will use most. Note that <link> is void — it points at a stylesheet — while <a>, the one people call a link, wraps content and definitely closes.

Elements go inside other elements, and that nesting is what makes a document a tree. The one rule: an element opened inside another must close inside it too.

<p>This is <strong>very</strong> important.</p>     correct<p>This is <strong>very important.</p></strong>     WRONG

In the second line, strong opens inside the paragraph and closes outside it. The elements overlap rather than nest, which describes no possible tree. The browser will silently invent one, and it will not be the one you meant.

Indent one level per nesting level. It is purely for humans — the browser ignores all of it — and it is the difference between spotting an unclosed tag in two seconds and hunting it for ten minutes.

<article>  <h2>A post</h2>  <p>    Some text with a <a href="/more">link</a> in it.  </p>  <ul>    <li>First</li>    <li>Second</li>  </ul></article>

Try it: change the h2 to an h1, wrap a word in <em>, and add a third list item. Then delete one closing tag and see what the browser decides you meant.

HTML has no error messages. Nothing refuses to load, nothing turns red, and nothing tells you a tag never closed. The browser guesses, patches your document into something it can render, and shows you the result.

This was a deliberate design decision in the 1990s and it is why the web still works. It is also why a broken page can be so hard to debug: your mistake produced a page, just not the one you wrote.

<p>First paragraph.<p>Second paragraph.</p> <!-- The browser silently closes the first p before the second     opens, because a p cannot contain a p. Here it does the     right thing. It will not always. -->

The habits that avoid most of it are small: close every tag as you write the opening one, indent consistently, and validate before you publish anything you care about.