용어 사전 coding 용어 페이지

시맨틱 HTML

의미가 드러나는 태그를 선택해 구조를 표현하는 HTML 작성 방식

semantic-html #html#accessibility#frontend

English version

다른 이름

semantic htmlsemantic markup시맨틱 마크업

관련 개념

접근성 ARIA 속성

핵심 아이디어

시맨틱 HTML은 div를 무조건 쌓는 대신 header, nav, main, section, button, label처럼 의미가 드러나는 태그를 선택해 문서 구조를 표현하는 방식입니다.

중요한 점은 시맨틱 HTML이 단지 "예쁘게 짜는 습관"이 아니라는 것입니다. 구조가 명확해지면 브라우저, 검색 엔진, 보조기기가 문서를 더 잘 이해할 수 있고, 접근성도 자연스럽게 좋아집니다.

이 블로그에서의 역할

Mathbong에서는 프론트엔드 UI 실습에서 접근성을 설명할 때 가장 먼저 잡는 기준점입니다. 이후 ARIA 속성은 시맨틱 정보가 부족할 때만 보조적으로 붙인다는 원칙도 이 개념을 바탕으로 설명합니다.

이 개념을 다루는 글

[JavaScript 시리즈 13편] UI 코드에서 접근성과 시맨틱 HTML 의식하기 스크린 리더와 키보드 사용자를 배려하는 시맨틱 마크업, aria 속성, 포커스 제어 기법을 배웁니다.[JavaScript Series 13] Build Accessible UIs with Semantic HTML and JavaScript Learn semantic markup, ARIA attributes, and focus control techniques that serve screen-reader and keyboard users.