콘텐츠의 역할을 드러내는 시맨틱 요소를 선택합니다.
article, section, nav, main, header, footer 같은 요소는 영역의 의미를 이름으로 전달합니다. div와 똑같이 꾸밀 수 있지만 검색엔진과 보조 기술이 구조를 이해하기 쉬워집니다.
예제에서는 <article><header>...</header></article> 부분부터 찾으세요. 태그 이름만 외우기보다 부모·자식 관계와 속성이 어느 요소에 붙는지를 한 덩어리로 읽으면 구조를 고치기 쉬워집니다.
먼저 현재 결과를 확인한 뒤 관련 글 링크를 담은 nav와 보충 설명 aside를 추가하세요. 수정 전에는 예상한 변화를 한 문장으로 적고, 실행 뒤에는 정보 순서와 키보드 접근까지 그대로인지 살펴보세요.
모양이 비슷하다는 이유로 모든 영역을 section으로 만들지 말고 제목과 독립된 주제가 있는지 확인하세요.
직접 바꿔보세요관련 글 링크를 담은 nav와 보충 설명 aside를 추가하세요.