1. 시맨틱 태그(semantic Tag)란?
시맨틱 태그는 div태그인데 의미를 가진 div 태그이다.
사이트의 영역을 좀 더 의미있게 나눌 때 사용함
따라서 div태그와 동일하게 사용하면 됨
시맨틱 태그의 종류
1) header
영역 위쪽에서 로고나 제목, 메뉴 같이 영역의 도입부를 담고 있음
2) main
영역의 본격적인 내용
main tag는 한 페이지에 딱 한 번만 쓸 수 있음
3) footer
영역 아래쪽에서 여러가지 정보를 담고 있음
4) article
하나의 독립적인 영역을 나타냄
ex) 블로그 글 하나, 또는 댓글 하나
5) section
여러 부분으로 나누어서 글들을 보여줄 때, section으로 영역을 나눌 수 있음
6) figure
이미지와 이미지에 대한 설명을 묶어놓음
2. 시맨틱 태그를 왜 쓸까?
1) 검색 엔진 최적화 (Search Engine Optimization)
웹 사이트를 만들고 검색 엔진에 등록도 하고 광고도 하겠지?
검색했을 때, 내가 원하는 사람들에게 딱 맞게 보여줄 수 있도록 사이트 최적화 -> SEO
SEO를 하는 방법
1) head 태그 안에 meta 태그를 꼼꼼하게 작성
2) 시맨틱 태그 작성
메타 데이터와 시맨틱 태그를 잘 작성해두면, 검색 엔진이 사이트를 더 정확하게 파악할 수 있음
2) 웹 접근성 (Web Accessibility = A11y)
2020년 기준으로 세계 인구의 15%가 장애인이라고 함
특히 시각 장애인은 인터넷을 사용하는데 많은 어려움을 겪음
시각 장애인은 스크린 리더라는 프로그램으로 인터넷을 사용
스크린 리더를 이용했을 때,
div태그로 만든 사이트는 어디가 본문이고 어디가 메뉴인지 알기가 어려움
하지만 시맨틱 태그로 만든 사이트는 main에서 nav로.. 이러한 움직임이 편리함
### 장벽없는 (Barrier-Free) 인터넷을 만드는데 중요한 역할을 하는 시맨틱 태그
3) 개발자 관점
코드를 통해서 사이트를 이해해야하는 개발자들에게 있어서 div태그가 잔뜩 적혀있는 파일과 시맨틱 태그를 사용한 파일이 있을 때, 다른 개발자가 코드를 읽고 이해하기 쉬운 쪽은 어디일까?
-> 시맨틱 태그를 이용한 파일
개발자의 생산성이 높아짐!
