태그 선택은 화면보다 먼저 의미를 전달한다
header, nav, main, article 같은 태그는 브라우저와 보조 기술에 콘텐츠의 역할을 알려준다.
| 태그 선택 | 전달하는 의미 | 도움 받는 대상 | 고칠 신호 |
|---|---|---|---|
| Landmark | 페이지 영역을 빠르게 찾게 함 | 스크린 리더, 키보드 사용자 | 모든 영역이 div |
| Heading | 문서 목차를 형성 | 검색 엔진, 보조 기술 | 크기 때문에 h 단계 건너뜀 |
| Article | 독립적으로 읽을 콘텐츠 | 피드, 검색 결과 | 반복 카드의 의미 불명확 |
| Button | 현재 화면에서 동작 실행 | 키보드, 접근성 API | 클릭 가능한 div |
| Link | 다른 URL이나 위치로 이동 | 브라우저 기본 동작 | button으로 페이지 이동 |
시맨틱 태그의 장점은 디자인 이전에 코드만 봐도 콘텐츠 역할과 사용자 행동이 드러나는 것이다.