시맨틱 태그의 의미 (Semantic Tag)
성질은 div와 똑같으면서도, 의미를 가진 태그라는 뜻에서 시맨틱 태그라고 한다.
1. 시맨틱 태그의 종류
<header> : 영역 위쪽에서 로고나 제목, 메뉴 등을 담고 있는 도입부
<nav> : 메뉴 내용들을 담고 있는 영역
<main> : 사이트의 중심 내용으로, 한 페이지 내에서 딱 한 번만 사용 가능
<footer> : 영역 아래쪽에서 여러 가지 연락처나 관련 정보를 담고 있음
<article> : 하나의 완성된, 독립적인 내용을 나타내는 영역 (블로그 글, 댓글 등)
<section> : 페이지의 일부분을 나타내는 영역
<figure> : 이미지와, 이미지 설명을 담고 있는 영역
2. 시맨틱 태그를 사용하면 좋은 점
시맨틱 태그는 HTML 태그를 의미있게 작성하기 위해 중요하다.
시맨틱 태그를 사용하면 1. 검색 엔진 최적화, 2.웹 접근성 향상, 3.개발자의 생산성을 높인다는 장점이 있다.
검색 엔진 최적화 (SEO, Search Engine Optimization)
우리가 구글, 네이버에서 검색을 해보면 어떤 사이트는 위에 먼저 뜨고, 어떤 사이트는 좀 더 밑에 뜨기도 한다. 이렇게 검색했을 때 사용자에 따라 웹사이트를 맞춤형으로 노출시키도록 최적화하는 것을 검색 엔진 최적화(SEO, Search Engine Optimization)라고 한다.
SEO의 방법은 여러가지가 있지만, 가장 기본적인 방법은 <head>태그 안에 메타 데이터를 꼼꼼하게 작성하고, 시맨틱 태그를 작성하는 것이다.
여러 검색엔진 서비스에서는 검색 엔진 프로그램을 사용해 여러 사이트의 정보를 수집한다. 이때 메타데이터와 시맨틱태그가 잘 작성되어 있다면 검색엔진이 우리 사이트를 더 정확하게 파악할 수 있다. 따라서 시맨틱태그를 잘 활용하면 검색 엔진 최적화를 하는 데 도움이 된다.
웹 접근성 (A11y, Web Accessibility)
웹서비스는 다양한 사람들이 사용한다. 특히 시각장애인은 스크린 리더(화면을 소리내서 읽어주는 프로그램)라는 프로그램을 통해 인터넷을 사용하기 때문에 웹 접근성이 낮다고 할 수 있다.
이럴 때 <div>태그로만 작성된 사이트보다 시맨틱 태그로 작성되어 메뉴-본문-하단글 등 순서가 있는 사이트가 더욱 웹 접근성이 높을 것이다. 이런식으로 장벽 없는 Barrier-Free 인터넷을 만드는 데 중요한 역할을 하는 것이 바로 시맨틱 태그이다.
개발자의 생산성
개발자는 눈에 보이는 화면뿐만 아니라 코드를 통해 사이트를 이해해야 한다. 또한 개발자는 코드를 읽고 수정하는 게 직업인 사람이다.
<div>태그가 잔뜩 적혀있는 코드보단 시맨틱 태그로 잘 정리된 코드, 다른 개발자도 쉽게 이해할 수 있는 코드를 작성해야 개발자의 생산성을 높이는 데 큰 도움을 줄 수 있다.
요약
시맨틱 태그(Semantic Tag)
1. 영역을 의미있게 나누기 위해 사용
2. <div>태그와 기능은 완전히 같음
3. 작성하는 사람의 의도가 중요
시맨틱 태그를 사용하면 좋은점
1. 검색 엔진 최적화(SEO)를 할 수 있는 가장 기본적인 방법
2. 사용자의 웹 접근성을 높이기 위해서 사용
3. 다른 동료 개발자도 쉽게 이해할 수 있도록 시맨틱 태그를 활용해 개발자 생산성을 높임
