JavaScriptなしでHTMLだけでできること
원제: HTML Can Do That
왜 중요한가
HTML 네이티브 기능의 확장은 JavaScript 의존도를 낮추고 웹의 접근성·성능 향상에 직접 기여한다.
웹 개발자 Chris Burnell이 2026년 8월 20일에 HTML Day를 기념해 작성한 페이지「HTML Can Do That」を公開した。JavaScript없이 HTML만으로 팝오버, 다이얼로그, 아코디언 등 동적 기능을 구현할 수 있는 사례를 정리하고 있다。
웹 개발자 Chris Burnell이 「HTML Can Do That」라는 페이지를 공개했다. 이 페이지는 JavaScript 없이 현대 HTML만으로 구현 가능한 동적 기능을 정리한 자료로, 2026년 HTML Day에 1시간 만에 제작된 후 접근성 관련 내용을 추가하는 형태로 업데이트됐다.
소개된 주요 기능은 다음과 같다.
**popover**: `popover` 및 `popovertarget` 속성을 사용하면 라이트 디스미스, Esc 키 닫기, z-index 관리 없이 팝오버를 구현할 수 있다.
**`<dialog>` 요소**: 모달 다이얼로그 전용 요소로, `popover` 속성과 조합해 JavaScript 없이 열고 닫는 것이 가능하다. JavaScript를 사용하는 경우의 `.showModal()` / `.close()` 방법도 별도로 소개하고 있다.
**그룹화된 `<details>`**: `name` 속성을 공유하면 복수의 `<details>` 요소가 배타적 아코디언으로 동작하며, 하나를 열면 다른 것이 자동으로 닫힌다.
**`command` & `commandfor`**: `show-modal`, `close`, `toggle-popover` 등 인보커 커맨드를 통해 별도의 버튼으로 팝오버 등을 제어할 수 있다. 현재 일부 커맨드는 주요 브라우저에 안정적으로 탑재됐으나, 접근성 요구사항을 완전히 충족하지 못하는 부분도 있다고 Burnell은 지적했다.