Tags, elements, and attributes

Good news: HTML has one grammatical pattern, repeated everywhere. Learn it once and you can read any page on the internet.

The pattern

<p class="intro">Welcome to the trail.</p>

The whole package — open tag, content, close tag — is an element.

Nesting: elements inside elements

<strong> (importance, usually bold) and <em> (emphasis, usually italic) sit inside the paragraph. One rule governs all nesting: last opened, first closed.

<p>This is <strong>right</strong></p>     ✅
<p>This is <strong>wrong</p></strong>     ❌ overlapping

Self-closing elements

A few elements have no content, so they need no closing tag:

<br> is a line break, <hr> a horizontal rule. You'll meet <img> (an image) — the most important one — in the next module.