CSS 시맨틱태그

📝 시맨틱태그 후 레이아웃 만드는거 연습하기
#230217

📌 시맨틱(Semantic, 의미) 태그 (-> 의미있는 태그)

기존 영역 분할에 주로 사용되던 div, span 등의 태그는
나눈다는 것 이외의 의미를 파악하기 어려움.
태그만 봤을 때 태그의 목적을 알 수 없어 id 또는 class 반드시 추가해야 한다.

이런 문제점을 해결하고

1. 태그 이름만으로 어느정도 어떤 역할을 하는지 알 수 있고
2. 웹 접근성(SEO) 향상에 도움이 되는 시맨틱 태그가 추가됨

✔️ [제공하는 태그]

• header 태그 : 문서의 제목, 머리말 영역

• footer 태그 : 문서의 하단 부분, 꼬리말, 정보 작성 영역 / 메인 바깥에서 사용
  

• nav 태그 : 나침반 역할(다른 페이지, 사이트 이동)의 링크 작성 영역

• main 태그 : 현재 문서의 주된 콘텐츠 작성 영역

• section 태그 : 구역 구문을 위한 영역

• article 태그 : 본문과 독립된 콘텐츠를 작성하는 영역(작은 토막)

• aside 태그 : 사이드바(보통 양쪽), 광고영역