HTML Attributes

Introduction

Attributes configure elements — href, src, alt, aria-*, data-*. Boolean attributes (disabled, hidden) have presence semantics. Google's accessibility crawls use alt and label attributes from raw HTML.

Business problem

Attribute drift between SSR and CSR causes hydration mismatch and broken images in production CDN paths.

• alt omission: Legal and SEO risk on images.
• Broken href: Crawl traps and 404 chains.
• data-* abuse: State that should be in DOM APIs.

Why this feature exists

Attributes extend tags without new elements — key/value and boolean forms standardized in HTML5.

• Global: id, class, lang, title, hidden, tabindex.
• ARIA: Supplements when native insufficient.
• data: Custom metadata — no behavior by default.

Browser internals

ID tree maps attributes to DOM properties — href on a reflects URL, id must be unique document-wide.

• Boolean: Presence=true, absence=false — not false string.
• Enumerated: rel, loading — token lists.
• Reflect: IDL properties sync from attributes.

getAttribute vs .href — resolved absolute URL on property

Rendering workflow

loading=lazy on img defers resource fetch — affects LCP if on hero. width/height reserve layout box.

• decoding: async image decode off main thread.
• fetchpriority: high for LCP image.
• sizes/srcset: Responsive selection before paint.

Feature deep dive

Categories: global attributes on any element; others per spec tables.

• id: Fragment targets and label for — unique.
• class: Presentational hook — not semantic.
• lang: Overrides document language locally.

<a href="/docs" rel="noopener" hreflang="en">Docs</a>
<img src="hero.webp" alt="Dashboard" width="1200" height="630" fetchpriority="high">

Accessibility analysis

alt, aria-label, aria-labelledby compute accessible name — precedence rules matter.

• title attr: Not reliable a11y name — tooltip only.
• tabindex=0: Manual focus order — use sparingly.
• hidden: Removes from accessibility tree.

SEO impact

href, canonical, hreflang attributes shape indexation and international SEO.

• rel=nofollow: Hint not directive.
• alt: Image search relevance.
• loading lazy: May delay LCP image discovery.

Security considerations

href javascript: and inline event attributes are XSS. rel=noopener on target=_blank prevents tabnabbing.

• srcdoc iframe: Inline HTML injection surface.
• formaction: Open redirect if attacker controls.
• referrerpolicy: Data leak control.

Performance impact

srcset/sizes reduce bytes — wrong sizes wastes bandwidth. Too many data-attributes bloat HTML.

• lazy below fold: Good INP/LCP tradeoff.
• preload link: Attribute-driven priority.
• decoding async: Smoother paint.

Real production example

Shopify CDN images auto-generate srcset; theme enforces width/height attributes from asset metadata.

Enterprise usage

Attribute allowlists in CMS — authors can't add onclick or style.

• Lint: Required alt on img in CI.
• Schema: data-testid only in non-prod builds stripped at compile.

Common production failures

Missing rel=noopener on Stripe partner links — reverse tabnabbing phishing incident industry-wide lesson.

• Duplicate ids: Hydration broke label association.
• fetchpriority everywhere: Priority inversion — LCP worse.

Architecture review questions

• Are boolean attributes used correctly without =false?
• Is id unique and stable across SSR/CSR?
• Do images have meaningful alt and dimensions?
• Are external links rel=noopener noreferrer?
• Does lazy loading avoid LCP candidate?
• Are data-* attributes documented for JS consumers?

Hands-on project

Attribute lint pack: required alt, unique id check, rel on _blank, no inline on* handlers.

• Deliverable: ESLint custom rule or html-validate plugin.
• Verify: Fail build on sample bad template.

Interview questions

Try it yourself

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

Summary

Attributes configure behavior, accessibility, SEO, and loading. Staff engineers lint critical attributes in CI and understand IDL reflection versus authored markup.