Markup CityISSUE #5 of 39

elements · the building bricks

Tagg the BuilderVSThe Unclosed Tag

Tagg the Builder saysAn element is a tag pair wrapping content: an opening tag, the content, and a matching closing tag.

The element is HTML's basic unit. Most look like text — an opening tag, content, and a closing tag with a slash. The browser treats everything between as belonging to that element.

A few elements are empty (void) — they have no content and no closing tag, like   and <img>. Elements nest inside each other to build the tree, so always close the inner one before the outer.

Power-ups you unlock

Most elements: <tag>content</tag>
Void elements ( , <img>, <hr>) have no closing tag
Nest cleanly: close inner elements before outer ones
The whole page is elements nested inside <html>

The Unclosed Tag attacks — common mistakes

Overlapping tags: text — close in reverse order
Adding or </img> — void elements have no closing tag
Forgetting the slash in a closing tag ( … instead of )

Boss battleNest a inside a , then deliberately overlap them and watch how the browser silently "fixes" your tree in DevTools.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body>
  <p>A paragraph <strong>with a nested strong element</strong> inside.</p>
  <hr>
  <p>An <code>&lt;hr&gt;</code> above is a void element — no closing tag.</p>
</body></html>

▶ Open the interactive comic issue

‹ The Smallest Valid Page Attributes · Adding Instructions ›