HTML/CSS - 시맨틱(Semantic) 태그란?

HTML/CSS - 시맨틱(Semantic) 태그란?

 

 

 

보통 태그들은 의미가 없이 사용되는 경우들이 있다. 가령 예를 들면 <div> 를 예로 들 수 있겠다.

 

<div> 뒤에 class 를 붙여줘서 의미를 추가해 줄 수는 있지만, 기본적으로는 특별한 의미는 없다.

 

 

하지만 각자의 태그가 어떠한 역할을 하고있는지 나타내주는 태그들이 있는데 우리는 이걸 시맨틱(semantic) 태그라고 부른다.

 

시맨틱 태그로 자주 사용 되는 것들이 있는데, 

 

<header>

<nav>

<section>

<article>

<aside>

<footer>

 

등등이 있다.

 

딱 보면 어떠한 역할을 하는지 짐작이 가는 태그들이다

 

 

이러한 태그들을 사용하는 이유는

 

1. 우선 코드를 볼때 가독성이 좋아지고 코드들의 역할을 한눈에 파악하기가 쉬워진다.

 

또 하나의 이유는 바로

 

2. SEO (Search Engine Optimizaion) 즉, 검색엔진 최적화가 효율적으로 잘되게 하기위해서이다.

 

 

시맨틱 태그를 적절히 잘 사용한 코드로 만든 홈페이지는 SEO 가 효율적으로 동작하여 더 큰 효과를 볼 수 있다.