Semantic: 의미의, 의미론적
정의
시맨틱(Semantic)단어의 번역을 먼저 해보면 의미의, 의미론적 이란 뜻으로
시맨틱태그는 웹사이트 구조의 의미를 가지고 있는 태그이다.
조금 더 자세하게 설명하자면 포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그이다.
시맨틱태그 종류
-
header
영역 위쪽에 로고나 제목 등 영역의 도입부를 담당 -
nav
네이게이션, 목차, 리스트 등 다른 페이지로의 이동을 위한 링크 공간을 위주로 표현 -
main
메인 내용을 담는 태그로, 웹사이트의 주요 내용들을 작성 -
article
독립적인 글을 다루는 데 사용하는 태그 -
section
주제, 카테고리 별로 구분하는 용도로 사용하는 태그 -
aside
좌측과 우측 사이드 위치의 공간을 의미하며, 본문 외에 부수적인 내용을 주로 표현하는 태그 -
footer
영역 아래쪽에서 여러정보를 담고 있는 주로 바닥글을 표현하는 태그
시맨틱태그를 사용해서 좋은 점
- 검색엔진 최적화(SEO)
브라우저 검색엔진이 알맞은 검색결과를 내기 위해 웹사이트를 크롤링할 때 웹 사이트의 내부에 담긴 정보를 토대로 사이트를 분석하여 보여주는데 이때 웹사이트의 내부정보에 시맨틱태그가 포함이 된다.
그래서 시맨틱태그를 사용하면 좀 더 정확한 구조로 분석할 수 있도록 도움을 주고 사람들이 우리사이트와 관련된 주제를 검색 하였을 때 보여줄 수 있도록 최적화할 수 있다.
- 웹 접근성
일반 브라우저에서는 큰 차이가 없지만 스크린리더(시각장애인을 위한 웹프로그램)과 같은 환경에서는 시맨틱태그가 큰 이점을 준다.
- 가독성 향상
만약 모든 태그들이 div로 되어 있으면 개발자들이 코드를 읽을 때 코드의 의미를 파악하는데 시간이 오래 걸린다. 이때 시맨틱 태그를 사용하면 태그의 영역이 어디인지 빠르게 파악이 가능하여 웹페이지를 효율적으로 만들 수 있다.
