Syntax Rules & Conventions

Now that you know the shape of a full document, it's time to learn the grammar rules for writing individual elements correctly. HTML is famously forgiving, but "forgiving" doesn't mean "no rules" — it means the browser tries its best to recover from mistakes, often silently, in ways that can surprise you.

Opening and closing tags

Most elements have an opening tag, some content, and a matching closing tag:

HTML

<p>This is a paragraph.</p>

The opening tag starts the element: <code><p></code>.
The closing tag ends it, with a forward slash before the tag name: <code></p></code>.
Everything between them is the element's content.

Forgetting a closing tag is a common bug

Browsers often recover from a missing closing tag by guessing where it should have gone — but that guess doesn't always match your intent, especially with nested elements. Always close what you open.

Self-closing (void) syntax

Some elements never have content or a closing tag, because they represent a single thing rather than wrapping content — <img>, <br>, <input>. These are called void elements, covered fully on their own page later.

HTML

<img src="cat.jpg" alt="A sleeping cat" />
<br />
<input type="text" name="username" />

The trailing slash (/>) is optional in HTML5 — <br> and <br /> are both valid and identical — but many teams keep it as a habit inherited from XHTML, since it visually signals "this tag has no closing pair."

Attribute quoting conventions

Attribute values are technically allowed unquoted in HTML5 if they contain no spaces or special characters, but quoting is the near-universal convention because it's safer and more consistent.

Style	Example	Recommended?
Double-quoted	`<a href="page.html">`	Yes — the standard convention
Single-quoted	`<a href='page.html'>`	Valid, less common in HTML (more common in JSX)
Unquoted	`<a href=page.html>`	Valid but discouraged — breaks with any space or special character

Pick one and stay consistent

This codebase — and most style guides — use double quotes for HTML attributes. Consistency across a project matters more than which specific style you pick.

Case-insensitivity (but lowercase by convention)

HTML tag and attribute names are case-insensitive: <DIV>, <Div>, and <div> are all treated identically by the parser. Despite that, lowercase is the overwhelming convention — a habit carried over from strict XHTML, where uppercase tags were actually invalid.

HTML

<!-- All parse identically, but only the last is conventional -->
<DIV CLASS="card">...</DIV>
<Div Class="card">...</Div>
<div class="card">...</div>

Lowercase everything

Lowercase tags and attributes are easier to read, match the style every major style guide enforces, and avoid confusion with component names in frameworks like React (where uppercase names signal a custom component rather than a plain HTML tag).

Nesting must not cross

Elements must be properly nested — an inner element must close before its outer element closes. Tags cannot overlap.

HTML

<!-- Correct: <em> opens and closes fully inside <p> -->
<p>This is <em>important</em> text.</p>

<!-- Incorrect: tags overlap / cross each other -->
<p>This is <em>important</p></em>

Picture nesting like parentheses in math: (a(b)c) is valid, but (a(b)c) written as (a(b then )c)) with the parts swapped is not. The second, invalid example above will still render something in a browser (browsers recover from broken nesting by closing tags early), but the actual result is often not what you intended, and it's invalid markup that other tools may parse differently.

A quick reference

Close every tag you open (except void elements).
Quote every attribute value with double quotes.
Write tag and attribute names in lowercase.
Never let one element's closing tag appear before an element nested inside it has closed.

With the grammar rules in place, next we'll formalize the vocabulary itself — the precise difference between a tag, an element, and a node, plus parent/child/sibling relationships and content models.