시맨틱 HTML은 문서의 모양만 보고 태그를 고르는 대신 콘텐츠의 의미와 역할에 맞는 요소를 사용하는 작성 방식이다. 큰 글자는 제목인지, 클릭하는 항목은 이동 링크인지 실행 버튼인지 구별한다. 이 의미는 브라우저와 보조 기술이 문서를 해석하는 데 사용된다.
모양과 역할은 다르다
span을 크게 꾸미면 제목처럼 보이지만 그 자체로 제목 역할을 갖는 것은 아니다. 제목에는 적절한 수준의 h1부터 h6을 사용하고, 본문은 문단, 순서가 중요하지 않은 항목은 목록으로 표현한다. 외형은 CSS로 조정할 수 있으므로 기본 글자 크기가 마음에 들지 않는다는 이유로 의미가 다른 요소를 선택할 필요는 없다.
위키 문서에 적용하기
문서 제목 아래에 개요, 사용 예와 주의점을 소제목으로 구성하면 독자는 원하는 부분으로 이동하기 쉽다. 주된 내용은 main, 주요 탐색 링크는 nav 같은 구조를 고려한다. 독립적으로 이해할 수 있는 콘텐츠에는 article이 적합할 수 있지만, 모든 상자를 무조건 article이나 section으로 감쌀 필요는 없다. 의미 없이 묶을 때는 일반 컨테이너도 유효하다.
링크와 버튼 선택
| 사용자 행동 | 적합한 기본 요소 |
|---|---|
| 다른 문서로 이동 | a |
| 저장하거나 대화상자 열기 | button |
| 항목을 순서대로 나열 | ol |
이 구분은 웹 접근성과 관련된다. 기본 요소가 제공하는 키보드 동작과 역할을 활용하면 임의의 요소에 같은 기능을 다시 만드는 작업이 줄어든다. 클릭 이벤트만 연결한 상자는 화면에서는 버튼처럼 보여도 키보드 사용자가 접근하지 못할 수 있다. 관련 공식 설명.
효과를 과장하지 않기
의미 있는 HTML은 문서 구조를 명확히 하지만 검색 순위나 완전한 접근성을 보장하지 않는다. 대체 텍스트, 명확한 레이블, 대비와 포커스 같은 별도 조건도 필요하다. 개발자 도구의 DOM과 접근성 트리, 키보드 탐색을 함께 확인한다. 작성 과정에서 제목 수준과 표의 헤더 관계가 콘텐츠의 실제 논리 구조를 반영하는지 점검하는 것이 실용적이다.
참고: 공식 개발 문서.