🏷️ HTML Foundations

Elements & Tags

⏱ 1 hr3 topicsLive playground
🎯 By the end: You can name the parts of an element, spot which tags need closing, and nest elements correctly without breaking the structure.

In the last lesson you met the page skeleton. Now we zoom right in on the building block it is made of: the element. Once you can read an element the way you read a word, the rest of HTML is just vocabulary.

1The anatomy of an element

Most HTML elements are written as a pair of tags wrapped around some content:

<p>Hello</p>opening tagcontentclosing tag
  • The opening tag — <p> — marks where the element starts.
  • The content — the text or other elements inside.
  • The closing tag — </p> — marks where it ends. Note the forward slash; that slash is the only difference, and forgetting it is the single most common beginner mistake.
Read it out loud: "paragraph, Hello, end paragraph." The closing tag always repeats the name with a / in front.
Key points
  • An element is usually an opening tag + content + closing tag.
  • The closing tag repeats the name with a slash: <p> … </p>.
  • Forgetting the closing slash is the most common beginner error.

2Void elements — tags that stand alone

A few elements have no content, so they have no closing tag. These are called void (or empty) elements. They do their job in a single tag:

  • <br> — a line break.
  • <hr> — a horizontal divider line.
  • <img> — an image (you give it a source instead of content).
  • <input> — a form field.
You may sometimes see them written with a trailing slash like <br />. In modern HTML that slash is optional and does nothing — <br> is perfectly correct.
Key points
  • Void elements like <br>, <hr>, <img> and <input> have no content and no closing tag.
  • The trailing slash in <br /> is optional in modern HTML.

3Nesting — elements inside elements

Elements live inside other elements, forming a tree of parents and children. The golden rule: tags must close in the reverse order they opened, like closing a set of brackets.

Correct — the inner element closes first:

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

Wrong — the tags overlap and cross over:

<p>This is <strong>very</p></strong>

Try it yourself below. The editor keeps a <strong> word inside a paragraph — add an <em> (italic) word too, making sure every tag you open, you close.

Nest some elements
HTML
CSS
Live preview
What's happening: Each paragraph is a parent; the <strong> and <em> elements are its children, sitting fully inside it. Notice every opening tag has a matching closing tag — that keeps the tree valid.
Key points
  • Elements nest to form a tree of parents and children.
  • Tags must close in reverse order — the inner tag closes before the outer one.
  • Overlapping tags like <strong>…</p></strong> are invalid.

★ Practical: a tiny nested page

In the playground above, build three lines:

  1. A paragraph with one <strong> (bold) word.
  2. A paragraph with one <em> (italic) word.
  3. A single <hr> between them — and notice it needs no closing tag.
  4. Confirm every opening tag has a matching closing tag (except the void <hr>).

Ready to test yourself?

Take the short quiz. Score 60% or more to mark this lesson complete.

Start the quiz →

💡 Log in to save your progress and earn the certificate.

← Previous
Introduction to HTML
Next →
Attributes