시맨틱 태그(Semantic Tag)란?
시맨틱 태그란 의미를 가진 태그이며 의미를 나누고 싶을때 사용하는 태그이다.
태그의 이름과 의미만 다를 뿐 div 태그랑 기능은 같다.
시맨틱 태그의 장점
1. 검색 엔진 최적화(SEO)
SEO는 Search Engine Optimization의 약자로 인터넷에서 검색했을 때 원하는 사람들에게 알맞게 보여줄 수 있도록 사이트를 최적화하는 것이다. 시맨틱 태그를 잘 사용하면 검색 엔진이 사이트를 더 정확하게 파악하여 상단에 노출될 확율이 높아진다.
2. 웹 접근성(Web Accessibility)
시각장애가 있는 사용자가 스크린 리더라는 프로그램을 사용했을 경우 메뉴, 본문 등을 정확하게 구분할 수 있다. 시맨틱 태그는 이러한 장벽없는 인터넷을 만드는데 중요한 역할을 한다.
3. 개발자 관점
시맨틱 태그를 사용하면 개발자가 코드를 읽고 이해하기 쉬워지며 개발자의 생산성을 높이는 데도 많은 도움이 된다.
시맨틱 태그의 종류
주로 사용하는 시맨틱 태그는 아래와 같다.
<header> 영역 위쪽에 로고나 제목, 메뉴 등을 담고 있는 도입부 <nav> header 영역 안에 있는 메뉴 <main> 사이트의 주된 내용으로 페이지에서 딱 한 번만 사용 가능 <footer> 영역 아래쪽에 여러 가지 연락처나 관련 정보를 담고 있음 <article> 하나의 완성된, 독립적인 내용을 나타내는 영역 <section> 어떤 것의 일부분을 나타내는 영역 <figure> 이미지와, 이미지 설명을 담고 있는 영역
