[HTML] 시맨틱 태그 (Semantic Tag)

Sematic Tag란 의미를 가지는 태그

 

시맨틱 태그는 왜 생겼을까?

웹 페이지의 레이아웃을 만들 때 <div> 태그를 이용하여 만들어주었다. 하지만 복잡한 웹페이지를 만들다보면 <div> 태그가 자연스럽게 많이 생기게 될 것이다. 결국 이 <div>태그는 무엇을 가리키는 태그인지 이해하기 어려워질 것이다. 

 

이러한 문제를 해결하기 위해 HTML5은 시맨틱 태그를 도입하였다. 쉽게 말해 시맨틱 태그는 이러한 여러 <div>들에 의미를 부여한 것이다. 태그들의 이름들만 봐도 레이아웃의 어느 부분을 가리키는 태그인지 쉽게 알 수 있다. 

 

[ 웹 페이지의 구조 ]

 

 

시맨틱 태그의 종류

태그	설명
<header>	페이지나 섹션의 도입부 또는 소개 정보를 나타냄
<nav>	네비게이션 표현을 위한 태그로써, 링크 목록을 포함됨
<main>	페이지의 주요 컨텐츠가 포함됨. 페이지 당 한 번만 사용되어야 함
<article>	해당 페이지에서 독립적으로 존재할 수  있는 컨텐츠를 의미, 태그 내의 컨텐츠를 배하거나 재사용할 수 있음
<section>	비슷한 주제의 컨텐츠의 그룹화하는 방법임.
<aside>	부수적인 컨텐츠를 나타냄. 주로 사이드바에 사용됨.
<footer>	페이지 하단, 일반적으로 웹 사이트의 정보가 포함

 

 

시맨틱 태그의 좋은점

1. 검색 엔진 최적화 (SEO : Search Engine Optimization)

 검색 엔진이 검색을 수행할 때 HTML 내에 있는 태그들을 분석한다. 시맨틱 태그를 이용하여 레이아웃을 만들어주면, 태그들의 의미가 분명해지기 때문에 검색 엔진이 해당 페이지를 더 잘 파악할 수 있다. 

 

2. 웹 접근성 (A11y : Web Accessibility)

 웹 접근성은 웹 사이트에서 제공하는 정보를 모두 동등하게 이용할 수 있도록 하기 위해서 만들어진 것이다. 장애인이나 고령자 분들이 웹 사이트를 통해 정보를 얻을 때 비장애인과 동등하게 접근하고 이용할 수 있기 위해서는 웹사이트의 접근성이 좋아야한다. 시맨틱 태그를 사용하여 레이아웃을 만들면 웹사이트의 접근성을 좋게 할 수 있다. 

 

3. 개발자의 생산성

<div> 만을 이용해 코드를 짜는 것보다 시맨틱 태그를 이용해 만들면 해당 영역을 한 눈에 파악이 가능해지기 때문에 유지보수가 쉬워진다.