콘텐츠의 역할을 드러내는 시맨틱 요소를 선택합니다.
article, section, nav, main, header, footer 같은 요소는 영역의 의미를 이름으로 전달합니다. div와 똑같이 꾸밀 수 있지만 검색엔진과 보조 기술이 구조를 이해하기 쉬워집니다.
article 안에 header, section, footer가 차례로 들어가 글 한 편의 머리, 본문, 꼬리를 이룹니다. 이 header와 footer는 페이지 전체가 아니라 article에 속한 머리말과 바닥글이라서, CSS도 article > header와 article > footer로 범위를 좁혀 아래 테두리와 회색 글자를 줍니다. section은 h2 제목을 가진 소주제 단위입니다.
article은 그 부분만 떼어 다른 페이지나 피드에 옮겨도 뜻이 통하는 완결된 글에 쓰고, section은 그런 글 안에서 제목으로 묶이는 주제 단위에 씁니다. 작성 시각을 넣을 때는 time 요소의 datetime 속성에 연-월-일 형식을 적어, 화면의 표현과 상관없이 기계가 날짜를 읽게 합니다.
모양이 비슷하다는 이유로 모든 영역을 section으로 만들지 말고 제목과 독립된 주제가 있는지 확인하세요.
직접 바꿔보세요관련 글 링크를 담은 nav와 보충 설명 aside를 추가하세요.