시맨틱 HTML landmark 순서
시맨틱 HTML은 div를 바꾸는 작업이 아니라 보조 기술이 페이지 영역과 조작 대상을 예측하게 만드는 구조 설계다.
| 구성 | 의미 | 좋은 기준 | 실수 신호 |
|---|---|---|---|
| header | 페이지나 섹션의 도입 영역 | 제목과 주요 탐색 시작점 | 모든 상단 박스를 header로 처리 |
| nav | 반복 이동 링크 묶음 | 주요 탐색에 label 제공 | 링크 모음이 div로만 존재 |
| main | 문서의 핵심 콘텐츠 | 페이지마다 한 번 | 여러 main 또는 main 누락 |
| article/section | 독립 글 또는 주제별 구획 | 제목과 함께 사용 | 의미 없이 section 남발 |
| button/link | 동작과 이동을 구분 | button은 실행, a는 이동 | div onClick으로 조작 |
시맨틱 구조는 CSS를 끄고 읽어도 페이지의 큰 지도와 조작 대상이 남아야 한다.