HTML that works harder

Before you begin

By the end, you can…

• Choose native HTML before recreating a control
• Explain the accessible name, role, and state of an element
• Use JavaScript as an enhancement instead of a prerequisite

01 / Understand

Start with behavior, not appearance

HTML is not a collection of neutral boxes. A button already knows how to receive focus, react to keyboard and pointer input, participate in forms, and announce itself to assistive technology. Rebuilding that behavior on a div means accepting responsibility for every interaction the browser previously handled.

Before choosing an element, write the user action as a sentence: submit information, navigate somewhere, reveal optional content, choose one option, or open a temporary layer. That verb usually points to a native element. Use ARIA to clarify a gap, not to repaint the identity of convenient markup.

02 / Apply

Progressive enhancement in three layers

Layer one is meaningful HTML that completes the essential task. Layer two is CSS that improves composition without changing meaning. Layer three is JavaScript that adds convenience while preserving links, forms, history, and browser conventions.

Test the boundary by blocking the script, tabbing through the interface, and inspecting the accessibility tree. A resilient experience may be less polished without enhancement, but it must remain understandable and useful.

<button popovertarget="lesson-tip">Why native?</button>
<aside id="lesson-tip" popover>
  Focus, dismissal, and top-layer behavior are built in.
</aside>

03 / Make

Your studio task

Make — Rebuild one custom menu with native disclosure or popover HTML.

1. Find one custom menu, disclosure, modal, or clickable div.
2. Name the user action and select the closest native element.
3. Rebuild the smallest version with HTML first, then style it.
4. Disable JavaScript and complete the task with a keyboard.

04 / Check

Knowledge check