21. CSS - 시맨틱 태그(semantic tag)

기존 영역 분할에 사용한 div, span 태그는 태그의 이름만 봤을 때 나눈다는 것 이외의 의미를 파악할 수 없다. -> id 또는 class 속성을 필수적으로 추가해야하는 번거로움이 있음.

 

• semantic tag = 시맨틱 태그, 의미있는 태그
  • 태그의 이름만으로 어느 정도 어떤 역할을 하는지 알 수 있음.
  • 웹 접근성 향상에 도움
  • div 태그의 이름만 바뀐 것으로 생각하면 좋음.
  • 시맨틱 태그 종류
    • <main> : 현재 문서의 주된 콘테츠를 작성하는 영역
    • <header> : 문서의 제목, 머리말 영역
    • <footer> : 문서의 하단 부분, 꼬릿말, 정보 작성 영역
    • <nav> : 나침반 역할(다른 페이지, 사이트로 이동)의 링크 작성 영역
    • <aside> : 사이드바, 광고 등을 표시하는 양쪽 영역
    • <section> : 구역을 구분하기 위한 영역
    • <article> : 본문과 독립된 콘텐츠를 작성하는 영역