[HTML]시맨틱 태그

시맨틱 태그

시맨틱 태그란?

의미가 있는 태그(Semantic Tag)라는 의미입니다.

시맨틱 태그 특징

• 영역을 의미있게 나눌 때 사용합니다.
• div태그와 기능이 같습니다.
• 작성하는 사람의 의도가 중요합니다.

시맨틱 태그 종류

header: 헤더 영역에 사용하는 태그.

main : 딱 한번만 사용하는 태그.

nav: 네비게이션 바(메뉴) 영역에 사용하는 태그.

section: article 보다 큰 영역을 나타낼 때 사용하는 태그.

figure : 이미지와 이미지내용을 묶어놓은 태그.

article: 보통 제목 태그와 문단 태그(완전한 내용)를 포함하며, 독립적인 개별 콘텐츠에 사용하는 태그.

aside: 사이드 영역에 사용하는 태그. (top버튼이나 본문 영역과 별개의 내용)

footer: 풋터 영역에 사용하는 태그.

시맨틱 태그 장점

1. 검색 최적화(Search Engine Optimization)

   head안에 meta를 꼼꼼하게 작성하고 시멘틱 태그를 지켜씁니다.검색엔진이 알맞은 검색결과를 내기 위해 웹사이트를 크롤링할 때 웹사이트의 내부에 담긴 정보를 토대로 사이트를 분석합니다.

2. 웹접근성(Web Accessibility)

   장벽 없는 인터넷을 만즐 수 있습니다. 브라우저가 웹 문서의 소스 코드를 보고 어느 부분이 헤더인지, 어느 부분이 본문인지를 쉽게 알아낼 수 있습니다. 웹 문서를 분석하는 서비스 (ex. 스크린 리더기) 같은 것들이 있을 때 분석하기 용이해집니다.

3. 코드 가독성 향상

   여러 사람과 함께 작업을 할 때, 굳이 클래스를 지정하지 않아도 쉽게 어느 부분이 헤더 영역이고, 본문 영역인지 쉽게 알 수 있습니다. 그래서 유지보수를 하기도 쉬워집니다.