정의

웹사이트의 배치를 기준으로 한 의미를 가진 태그. 기능 자체는 div 태그와 동일하다.

사용 이유

여러 이유가 있지만 결국 div 태그만 사용할 시에는 코드를 알아보기 힘드니, 모두 의미가 있는 태그(Semantic tag)를 이용하여 의미를 정확하게 명시되도록 하는 것이 주 목적이다. 즉 가독성(readability)과 접근성(Accessibility) 향상이라는 것.

1. 검색 최적화(Search Engine Optimization)
   사람이야 기본적으로 웹페이지를 보면 인식할 수 있지만 컴퓨터와 기계는 코드를 통해 페이지를 인식한다. 때문에 시맨틱 태그를 잘 작성한다면 검색 엔진 최적화가 더 잘 된다.
2. 웹 접근성(Web Accessibility)
   시각 장애인들을 위한 스크린 리더의 지원에도 도움이 된다. 어디가 헤더고 본문인지 등을 알 수 있기 때문에 Barrier-free 환경 조성에도 도움이 된다.
3. 유지 보수의 용이
   개발자가 코드를 읽을 줄 안다고 해서 파악하는 시간이 항상 빠른 것은 아니다. 시맨틱 태그를 이용하여 특정 의미를 가진 요소끼리 묶어 놓으면 코드를 읽고 이해하기에 쉬워저 생산성이 높아진다.

목록

특별하게 별도의 기능이 아니라 꼭 어디에 써야 한다고 정해진 것은 아니다. 주 사용처를 적었다.

• header
  영역 위쪽으로 로고나 메뉴 등을 감쌈.

• nav
  navigator의 약자. 메뉴 등에 사용.

• main
  주 내용을 감쌈. 한 번만 사용 가능.

• section
  부분 별로 나눔.

• article
  분리된 독립적 내용을 감쌈.

• figure
  이미지와 그 설명을 감쌈.

• footer
  영역 아래쪽으로 추가 정보들을 감쌈.