HTML Tag List

Introduction

HTML tag vocabulary for lint contracts is how enterprises govern markup — not a poster on the wall. Staff engineers curate allowlists and denylists in html-validate, ESLint plugins, and CMS sanitizers: which tags authors may use, which are deprecated, and which require paired review (iframe, script, object).

Business problem

Business pressure: WYSIWYG authors introduce <center>, script-bearing embeds, and table layouts; without tag lint rules, every publish becomes a manual audit.

• Scale: 500 authors × unconstrained tags = exponential audit cost.
• Security: Unexpected tags (script, object, embed) are XSS expansion vectors.
• Consistency: Component libraries assume a closed tag set — drift breaks snapshots.

Why this feature exists

Platform motivation: WHATWG HTML living standard defines 100+ elements; teams need subsets matching their threat model and design language.

• History: XHTML strictness failed; modern governance uses allowlist sanitization + lint.
• Alternative rejected: "Use common sense" author guidelines — unenforceable at scale.
• Modern role: Tag list drives CMS toolbar buttons and Storybook HTML export validation.

Browser internals

Unknown tags: HTML5 parser treats unknown elements as HTMLUnknownElement — they render and accept children, breaking assumptions. Custom elements require hyphenated names and defined behavior.

• Parser: Void elements (img, br, input) have distinct parsing rules — lint catches missing slashes in XML modes.
• DOM: Tag choice determines default role mapping in accessibility tree.
• Script impact: script, noscript, template have special parser considerations.

Rendering workflow

Tag choice affects render cost: table for layout forces table layout algorithm; nested divs increase DOM depth and paint work.

• Critical path: link, script, style in head — tag list policies often restrict who can add them.
• Layout: Prefer semantic block/inline categories over presentation tags (b vs strong is semantic not visual).
• Paint: svg, canvas, video tags trigger separate paint paths.

Feature deep dive

Enterprise tag tiers: Tier A always allowed (p, a, ul, button); Tier B requires review (iframe, video); Tier C forbidden (script in CMS, font, marquee). Tag list reference documents each with semantics, a11y, SEO notes.

• Content categories: metadata, flow, phrasing, sectioning — lint uses categories for nesting rules.
• Deprecated: acronym, big, center — map to modern replacements in lint autofix.
• Implicit roles: Tag list should link default ARIA roles for a11y reviewers.

<!-- .htmlvalidate.json excerpt — tag policy as code -->
{
  "elements": [
    { "name": "script", "permitted": false },
    { "name": "iframe", "attributes": { "sandbox": { "required": true } } }
  ]
}

Accessibility analysis

Tag list a11y: Banning button in favor of div+role is an anti-pattern — lint should require native interactive tags.

• Screen readers: Sectioning tags (nav, main, article) should be encouraged in allowlist.
• Keyboard: Denylist div[role=button] without full keyboard impl — require button.
• WCAG: Tag policies encode 1.3.1 Info and Relationships.

SEO impact

SEO-relevant tags: title, meta, link canonical, h1-h6, a, img alt, article — tag lint ensures money pages include required set.

• Crawl: noindex on meta — tag reference documents who may deploy.
• Rich results: script type=application/ld+json — separate Tier B policy.
• Core Web Vitals: img, picture, link rel=preload — tag list ties to perf module.

Security considerations

Tag denylist security: script, object, embed, form in user content — allowlist sanitization is default for UGC.

• XSS: on* attribute handlers often linted alongside tag policies.
• CSP: If script tag banned in CMS, CSP can be stricter without author breakage.
• Clickjacking: iframe tag policy requires sandbox + src allowlist domains.

Performance impact

Perf-related tags: picture, source, link rel=preload/modulepreload — tag list documents when each is permitted on LCP pages.

• LCP: img vs picture policy for art direction cases.
• INP: Restrict script tag count per page template.
• CLS: Require width/height attrs via lint rule on img tags.

Real production example

Design system tag contract: Published JSON schema of permitted tags per component slot — CI fails PR adding forbidden tag.

// cms-sanitizer-allowlist.ts
export const AUTHOR_TAGS = new Set([
  "p","h2","h3","ul","ol","li","a","strong","em","img","blockquote"
]);

Enterprise usage

Enterprise: BBC/GOV.UK style guides encode tag rules in automated checkers — reference doc is source for rule IDs.

• Design system: Each component docs list permitted child tags.
• CMS: Toolbar built from Tier A list only.
• CI gates: html-validate custom elements config in every repo.

Common production failures

What breaks in prod: CMS upgrade allowed table tag — authors rebuilt layout tables; mobile a11y collapsed.

• Incident: iframe allowed without sandbox — embed partner compromised, XSS on marketing site.
• SEO regression: h1 removed from allowlist typo — all pages multiple h2 only.
• Perf regression: video tag allowed without poster/preload policy — LCP regression sitewide.

Architecture review questions

• Does every forbidden tag have documented security or a11y reason?
• Are native interactive elements required over ARIA roles?
• Does tag policy align with CSP headers deployed?
• Can authors still express needed content within allowlist?
• Is tag list versioned with design system releases?

Hands-on project

Project: Draft Tier A/B/C tag list for a marketing CMS; implement html-validate config; document rationale per forbidden tag.

• Deliverable: reference table + .htmlvalidate.json.
• Verify: Sample author HTML passes/fails as expected.
• Stretch: Autofix suggestions for deprecated tags.

Interview questions

Try it yourself

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

Summary

HTML tag list reference powers enterprise lint contracts — Tier A/B/C governance, CMS allowlists, and accessibility-first native element requirements encoded in CI.