HTML Attributes (Reference)

Introduction

HTML attribute reference for validation pipelines catalogs which attributes are global, element-specific, boolean, enumerated, and URL-valued — the vocabulary CI rules and sanitizers enforce. Staff engineers know attributes are typed contracts: wrong value on rel or sandbox can open tabnabbing or XSS.

Business problem

Business pressure: Authors add target=_blank without noopener, sandbox without restrictions, or data-* payloads that exfiltrate PII to analytics — attribute-level lint catches what tag-level misses.

• Security: URL attributes (href, src, action) are injection surfaces.
• A11y: Missing alt, aria-* misuse, autocomplete omission — attribute failures.
• Perf: loading, fetchpriority, decoding attrs need documented defaults per template.

Why this feature exists

Platform motivation: Elements express structure; attributes carry behavior, metadata, and integration hooks.

• History: SGML attribute typing → HTML5 enumerated and boolean attribute rules.
• Alternative rejected: Everything in class string — untyped, unlintable.
• Modern role: Attributes referenced in JSON-LD generation and RUM markup hints.

Browser internals

Attribute parsing: Boolean attrs present=true absent=false; duplicate attrs — first wins per HTML; case-insensitive names; foreign content (SVG/MathML) namespaces differ.

• Parser: Unquoted attribute values end at whitespace — common author error.
• DOM: ID uniqueness is document constraint — duplicate ids break label association.
• Script impact: defer, async, type=module on script change execution order.

Rendering workflow

Attribute-driven rendering: width/height on img reserve layout; media attrs on video affect preload; link rel=preload starts fetch early.

• Critical path: rel=preload, as=, fetchpriority high on LCP image.
• Layout: colspan/rowspan affect table layout — lint max values in CMS tables.
• Paint: hidden attribute removes from render while keeping in DOM.

Feature deep dive

Attribute categories: global (id, class, lang, data-*), event (onclick deprecated pattern), aria-*, presentation (hidden, inert), URL (href, src, poster), enumerated (input type, button type).

• Boolean: required, disabled, checked — presence semantics.
• Enumerated: rel values, sandbox tokens, input types — validators check tokens.
• Security attrs: rel=noopener noreferrer, sandbox, referrerpolicy, crossorigin.

<a href="https://partner.example" target="_blank" rel="noopener noreferrer">Partner</a>
<img src="hero.webp" alt="Product" width="800" height="600" loading="eager" fetchpriority="high">
<iframe src="https://embed.example" sandbox="allow-scripts allow-same-origin" title="Chart"></iframe>

Accessibility analysis

A11y attributes: alt, for/id label pairing, aria-labelledby > aria-label when possible, role only when native insufficient, aria-hidden on decorative icons.

• Screen readers: alt="" for decorative; omit alt is failure on img.
• Keyboard: tabindex=-1 for programmatic focus only — lint overuse.
• WCAG: title attribute not substitute for visible label.

SEO impact

SEO attributes: href on canonical link, content on meta description, lang on html, hreflang on alternates — attribute reference ties to Search Console diagnostics.

• Crawl: robots content=noindex — attribute typo deindexes site.
• Rich results: itemprop (microdata) vs JSON-LD — attribute hygiene on visible content.
• Core Web Vitals: fetchpriority, loading, decoding on LCP candidate.

Security considerations

Attribute security matrix: Sanitize href/src protocols (block javascript:); enforce rel on target=_blank; sandbox token allowlists; strip on* handlers.

• XSS: href="javascript:alert(1)" — URL attr validation required.
• CSP: inline style attr conflicts with style-src — lint in strict mode.
• CSRF: form action must be same-origin or token Accompanied.

Performance impact

Perf attributes: loading=lazy below fold; decoding=async; fetchpriority=low on decorative images; media attrs on link for responsive preload.

• LCP: Never lazy-load LCP img — lint rule.
• INP: autofocus attr can steal focus and hurt UX — restrict.
• CLS: width/height required lint on img/video/iframe embeds.

Real production example

Attribute lint pack: Custom html-validate ruleset + eslint-plugin-jsx-a11y parity for React wrappers.

rules:
  require-img-alt: true
  no-target-blank-without-noopener: true
  require-button-type: true

Enterprise usage

Enterprise: DS documents required/optional attrs per component; CMS strips non-allowlisted attrs on paste.

• Design system: Prop tables map 1:1 to HTML attributes for web component base.
• CMS: data-* namespace reserved for analytics — documented keys only.
• CI gates: Attribute regression snapshots on template change.

Common production failures

What breaks in prod: target=_blank on all external links without noopener — tabnabbing phishing incident.

• Incident: sandbox="allow-scripts allow-same-origin" on user iframe — full escape.
• SEO regression: duplicate meta name=description attrs — Google ignored both.
• Perf regression: fetchpriority=high on every img — bandwidth starvation.

Architecture review questions

• Are URL attributes validated for safe protocols?
• Does every target=_blank have rel=noopener?
• Are boolean attributes used correctly without redundant values?
• Are aria-* attributes justified vs native HTML?
• Do img tags meet alt and dimension lint rules?

Hands-on project

Project: Build attribute allowlist matrix for anchor, img, iframe, form, input — implement 5 custom lint rules with docs.

• Deliverable: reference markdown table + validator config.
• Verify: Test vectors pass/fail per rule.
• Stretch: Autofix rel=noopener on target=_blank.

Interview questions

Try it yourself

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

Summary

HTML attributes reference feeds validation pipelines — global vs element-specific attrs, boolean/enumerated semantics, and enterprise lint rules for security, a11y, and Web Vitals.