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

시맨틱 태그의 semantic은 ‘의미의’, ‘의미론적인’이라는 뜻을 가진형용사를 말한다.

따라서, 시맨틱 태그란 의미가 있는 태그를 말한다.

예를들어 <b>는 의미없이 단순히 텍스트를 굵게 표현하는 태그지만, <strong>은 중요하다는 의미를 지닌 태그다.

<strong>은 중요하다는 의미에 맞춰 브라우저에 의해 굵은 스타일로 표현된 것이다.
따라서 "중요하다"는 의미를 포함하고 싶을때는 <b>가 아닌 <strong>을 사용하는 것이 적절하고 시맨틱한 마크업이라고 할 수 있다.

이렇게 의미있는 태그를 사용하면 다음과 같은 장점을 가질 수 있다.

 

1.검색엔진최적화(SEO)

검색엔진은 HTML코드 만으로 그 의미를 인지하는데 이때 시맨틱 요소를 해석할 수 있다.

시맨틱 요소로 구성되어 있는 웹페이지는 검색엔진에 보다 의미있게 문서정보를 전달할 수 있다.

2. 웹 접근성

시각 장애가 있는 사용자가 스크린 리더를 사용해 페이지를 탐색할 때 도움이 된다.

3. 유지보수 & 코드 가독성

시맨틱 태그를 사용한 코드블록을 찾는것은 무한 div를 탐색하는것보다 훨씬 쉽다.

또한, 내 코드를 읽는 다른 개발자가 보기에도 훨씬 편하다.

mdn web docs