HTML Elements

Introduction

HTML elements are vocabulary with content models — which children are legal, how text parses, and what ends the tag. Violating content models doesn't always break visually but corrupts accessibility tree and SEO outline.

Business problem

Invalid nesting (div inside p, interactive inside interactive) ships from component libraries and breaks silently in AT.

• Legal: Parser reparents nodes — DOM ≠ authored intent.
• QA cost: Cross-browser DOM inspection needed.
• Design systems: Need allowed child matrix per component.

Why this feature exists

Elements evolved from presentational tags to semantic vocabulary in HTML5.

• Deprecated: font, center — still in legacy CMS.
• New: article, section, nav — outline algorithm.
• Void: img, br — no closing tag.

Browser internals

Tree builder applies insertion modes per element; foster parenting for tables; template contents in document fragment.

• Void elements: No end tag — tokenizer switches immediately.
• Raw text: script/style skip entity decoding rules.
• Foreign content: SVG/MathML integration points.

Start tag → insertion mode
<p><div> → </p> auto-close (invalid but recovered)

Rendering workflow

Each element becomes layout object with default UA styles — unknown tags are inline unknown elements unless CSS display set.

• Replaced: img, video — intrinsic size.
• Anonymous boxes: Block inside inline splits.
• Display: UA stylesheet defines initial display.

Feature deep dive

Syntax: start tag, optional content, end tag. Void and self-closing only for void in HTML.

• Content categories: phrasing, flow, metadata.
• Transparent models: a, ins — complex nesting rules.
• Custom elements: Extend vocabulary with hyphen names.

<article>
  <h2>Title</h2>
  <p>Phrasing <em>inside</em> flow content.</p>
  <img src="x.jpg" alt="Product" width="400" height="300">
</article>

Accessibility analysis

Wrong element = wrong role. Use button not div for actions; use ul for lists.

• Outline: section needs heading.
• Interactive: No nested buttons.
• Tables: th for headers not styled td.

SEO impact

Semantic elements clarify content type to crawlers — article vs generic div.

• Headings: h1-h6 hierarchy in elements.
• Lists: ul/ol for structured crawls.
• nav: Internal link importance.

Security considerations

script, iframe, object elements are privilege escalation points — restrict in sanitizers.

• Custom elements: Shadow DOM boundary for widgets.
• link rel=import: Deprecated — avoid.
• meta http-equiv: CSP fallback only.

Performance impact

DOM node count scales with element granularity — excessive span wrapping hurts style recalc.

• Depth: Deep nesting increases selector matching cost.
• Tables: Large tables slow layout.
• Web components: Shadow boundaries help isolate.

Real production example

Airbnb listing pages use article/section semantic elements in SSR HTML for structured internal linking.

Enterprise usage

Design systems document allowed elements per slot — Button only renders button or a[role=button exception documented].

• Lint: eslint-plugin-html or custom AST rules.
• CMS blocks: Map to element whitelist.
• Reviews: Content model checklist in PR template.

Common production failures

p > div in email template — Gmail stripped inner promos; million-dollar campaign blank.

• Nested buttons: Click dead zones on mobile.
• svg title: Missing — icon-only failures.

Architecture review questions

• Does nesting obey HTML content models?
• Are void elements correctly unclosed?
• What DOM does parser build vs source?
• Which elements are focusable/interactive?
• Is heading hierarchy reflected in element choice?
• Could fewer wrappers reduce DOM size?

Hands-on project

Build content model cheat sheet for your design system's top 20 components; fail CI on violations.

• Deliverable: Matrix doc + test HTML fixtures.
• Verify: Parse with parse5 and assert tree.
• Stretch: Storybook HTML snapshot tests.

Interview questions

Try it yourself

Edit the HTML, CSS, or JS panels — the preview updates as you type.

Summary

HTML elements define structure through content models and semantics. Staff engineers validate nesting, minimize DOM noise, and align tags with accessibility and SEO roles.