Markup CityISSUE #33 of 39

style guide · keeping markup clean

Tagg the BuilderVSThe Unclosed Tag

Tagg the Builder saysA consistent style guide — lowercase tags, quoted attributes, two-space indent, alt on images — keeps markup readable.

HTML is forgiving, which means sloppy habits survive until they bite. A few conventions keep a codebase sane: lowercase tag and attribute names, always-quoted values, consistent indentation that mirrors nesting, and one element per line for blocks.

Add the essentials every time: <!doctype html>, lang on <html>, charset and viewport metas, and alt on every image. Pick a formatter (like Prettier) and let it enforce the rest.

Power-ups you unlock

Lowercase tags/attributes, always quote values
Indent to mirror nesting; one block element per line
Always include doctype, lang, charset, viewport, alt
Let a formatter enforce consistency automatically

The Unclosed Tag attacks — common mistakes

Mixed indentation that hides the nesting structure
Skipping alt, lang, or the viewport meta
Inconsistent quote styles and tag casing across files

Boss battleTake a messy snippet (uppercase tags, no quotes, no indent) and clean it to the style-guide conventions above.

Example code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>clean markup</title>
</head>
<body>
  <main>
    <h1>readable by design</h1>
    <img src="https://via.placeholder.com/60" alt="placeholder">
  </main>
</body>
</html>

▶ Open the interactive comic issue

‹ Semantic Tags · Header · Main · Article · Footer Entities · &Amp; · &Lt; · &Nbsp; ›