Header
페이지나 섹션의 제목, 소개, 주요 탐색 시작점을 둡니다.
시맨틱 구조와 접근성 연결
시맨틱 태그는 화면 배치용 이름이 아니라 문서 영역과 기능을 브라우저, 검색 엔진, 보조 기술에 전달하는 단서입니다.
Nav
반복적으로 이동할 핵심 링크 묶음을 분리합니다.
Main
문서의 고유한 중심 콘텐츠를 한 번만 담습니다.
Footer
저작권, 보조 링크, 관련 정보처럼 마무리 정보를 둡니다.
div보다 article, section, aside가 맞는지 콘텐츠 역할을 먼저 판단합니다.
링크와 버튼은 포커스 순서와 동작이 예측 가능해야 합니다.
이미지와 아이콘이 전달하는 내용을 텍스트로 보완합니다.
h 태그를 크기 조절용으로 건너뛰지 말고 문서 목차처럼 씁니다.
시맨틱 구조와 접근성 판단 질문
이 영역이 독립 콘텐츠인지, 탐색인지, 보조 정보인지 먼저 묻습니다.
검사 방법
CSS를 잠시 꺼도 문서 순서와 의미가 이해되는지 확인합니다.
시맨틱 구조와 접근성 연결
개인 블로그 페이지를 header, nav, main, article, footer로 나눕니다.