Html5 Reference

HTML5 Reference (WHATWG Living Standard)

Overview

HTML5 is not "a set of tags you can put anywhere." The WHATWG HTML Living Standard defines, for every element, which content category it belongs to, where it is allowed to appear, and what it is allowed to contain. Correct HTML is markup that satisfies these content model rules.

Core principle: Pick the element whose semantics match the content's meaning, then verify the nesting is valid per the content model. Meaning first, appearance never (styling is CSS's job).

This skill is the authoritative-but-condensed reference. It is version-current with the spec (living standard) — when in doubt, the linked multipage spec is the source of truth.

When to Use

• Deciding which element is correct (<section> vs <div> vs <article>; <b> vs <strong>; <figure> vs <img>).
• Checking whether a nesting is valid ("can a <div> go inside a <p>?" — no; "can an <a> wrap block content?" — yes, it's transparent).
• Building forms: choosing an <input> type, wiring up labels, native constraint validation.
• Adding accessible semantics: native element vs ARIA, landmarks, labeling.
• Reviewing HTML for conformance / removing deprecated markup.

Not for: CSS layout/styling, JS framework patterns, or build tooling. For this repo's web-dashboard conventions (Bootstrap/vanilla JS), that's a separate concern.

The Content Model in One Picture

Every element declares content categories (what it is) and a content model (what it may contain). An element may appear only where its categories are allowed.

Golden nesting rules (memorize these):

• Phrasing-only parents (<p>, <h1>–<h6>, <span>, <label>, <button>, <em>, …) may contain only phrasing content — never <div>, <ul>, <section>, or another <p>.
• Transparent elements (<a>, <ins>, <del>, <map>, <object>, <video>/<audio> content, <slot>, autonomous custom elements) inherit their parent's content model — so <a> can wrap block-level content when it sits in a flow context.
• <a> and <button> must not contain interactive content — no <a>, <button>, <input>, <select>, etc. (nor any element with tabindex) inside them. So no <a> in <a>, no <button> in <a>. (This restriction is specific to a/button — it is not a blanket "no interactive in interactive" rule.)
• <label> may contain at most one labelable control and no nested <label>. Wrapping its own control is fine (<label>Name <input></label>); adding a second control, or one the label doesn't label, is not.
• Inter-element whitespace is always allowed and ignored when checking content models.

Full details → elements.md (every element: category, allowed parents, content model) and content-model.md (categories, transparency, sectioning, validity rules).

Document Skeleton

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Required — the only mandatory metadata</title>
</head>
<body>
  <!-- flow content -->
</body>
</html>

Conformance essentials: <!DOCTYPE html> first, a single <html> root, a <head> containing exactly one <title> (unless <title> is supplied via a higher-level protocol), <meta charset> within the first 1024 bytes. <html>, <head>, <body> tags themselves are omissible per the parsing rules but keep them for clarity.