Semantic Elements

• HTML4 까진 모두 div로 처리하다 보니 컴퓨터 입장에서 어떤 태그가 어떤 역할을 담당하는지 알기 어려움.

• 크롤링을 어렵게 하고 웹 접근성, 검색엔진 최적화 등에서 특히 문제가 됨.

주요 Semantic Elements

header

• 보통 웹 페이지의 부가 정보 표기에 사용.

footer

• 보통 웹 페이지의 부가 정보 표기에 사용.

nav

• navigator. 페이지 이동을 위한 메뉴 배치.

main

• 본문, 콘텐츠 내용의 container

article

section

aside

• 본문 옆에 구성해 관련된 부가 정보 표기.

details

• 클릭했을 떄 상세 내용을 부여줌.

summary

• 요약 정보 표기. details와 함께 쓰임.

figure

figcaption

Related links

• [HTML 바로 알기] Semantic Web을 위한 Semantic Elements

• Previous
  MVC, MVP, MVVM, Flux 디자인 패턴
• Next
  Prototype 이란?