Markup CityISSUE #32 of 39

semantic tags · header · main · article · footer

Tagg the BuilderVSThe Unclosed Tag

Tagg the Builder saysSemantic tags name your content regions — header, nav, main, article, section, aside, footer — instead of anonymous divs.

Semantic elements describe what they contain. <article> is self-contained content (a post, a card). <section> is a thematic grouping. <nav> is navigation, <aside> tangential content, <figure>/<figcaption> media with a caption.

They render like divs but mean something — so screen readers can jump between landmarks, and search engines understand structure. Use them whenever one fits; fall back to <div> only when none does.

Power-ups you unlock

article = self-contained · section = thematic group
nav, aside, figure/figcaption, header, footer
Same rendering as div, but meaningful
Enables landmark navigation for assistive tech

The Unclosed Tag attacks — common mistakes

Wrapping everything in <section> without a heading inside it
Using <article> for non-self-contained fragments
Defaulting to <div> when a semantic element fits

Boss battleRebuild a card as an <article> with a <header> and <footer> inside it, instead of nested divs.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:sans-serif">
  <article style="border:1px solid #2a1d4a;border-radius:6px;padding:14px">
    <header><h2 style="margin:0;color:#b388ff">Post Title</h2></header>
    <p>self-contained content in an article.</p>
    <footer style="color:#8a82b0;font-size:12px">posted today</footer>
  </article>
</body></html>

▶ Open the interactive comic issue

‹ <Code> · <Pre> · <Kbd> · The Computer Tags Style Guide · Keeping Markup Clean ›