Semantic HTML Elements I Stopped Replacing With Divs

Описание и применение

Использование семантических тегов вместо <div onClick> улучшает доступность и упрощает код.

Задача

Using <div onClick> for interactive elements leads to accessibility and maintainability issues.

Результат

Switching to semantic elements removed multiple lines of JavaScript, improved keyboard and screen reader support, and shortened code.

Рабочий процесс

• Identify interactive <div onClick> elements
• Replace with appropriate semantic tag (e.g., <button type="button"> for actions)
• Remove tabindex, keydown listeners, role, aria-disabled, and custom styling
• For dialogs, use <dialog> and call showModal() to get focus trap and Escape handling
• For accordions, use <details> and <summary> to get disclosure widget behavior
• Wrap major navigation blocks in <nav> with optional aria-label
• Wrap dates/times in <time datetime="..."> for machine readability

Доказательства

A <div onClick> looks fine. It renders, it fires the handler, the demo works.

Источник

A real <button> gives you all of that in eleven characters.

Источник

The native <dialog> element does the hard parts. Call showModal() and the browser traps focus inside the dialog...

Источник

The native version is <details> with a <summary> inside, and it needs no JavaScript at all.

Источник

<nav> marks a block of navigation links as a landmark.

Источник