[html] 시맨틱 태그(semantic tag)를 사용하는 이유

HTML에서 시맨틱 태그를 사용하는 이유

semantic : '의미의', '의미론적인'

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

웹페이지의 구조를 짤 때,
HTML5가 등장하기 전까지는 <div> 와 <span> 태그를 이용해서 블록요소를 설정했었다.

<div id="header"> 머리말입니다. </div>
<div id="footer"> 꼬리말입니다. </div>

하지만, 이렇게 코드를 작성하면 가독성이 떨어질 뿐더러 <div>태그 자체가 가지는 의미가 아무것도 없기 때문에 검색 엔진 입장에서 구분이 쉽지 않았다.

시맨틱태그를 이용해서 머리말과 꼬리말을 작성하면 다음과 같다.

<header> 머리말입니다. </header>
<footer> 꼬리말입니다. </footer>

위와 같이, <div>태그로 작성한 후 id나 class명으로 용도를 구분짓는 것보다 태그 자체가 의미를 가지기 때문에 훨씬 가독성이 좋고 구분이 용이하다.

시맨틱태그를 사용했을 때의 장점

1. 시각장애인이 스크린 리더 등을 사용했을 경우, 제목과 본문을 정확하게 구분지을 수 있게 되어 사이트의 구조를 더욱 쉽게 이해할 수 있다.
2. 코드 가독성 및 유지보수가 용이하다. 만약 다른 개발자와 소스코드를 공유할 경우에, 수많은 <div>가 중첩된 코드보다 태그 자체가 의미를 가지는 시맨틱 태그를 사용했을 때 다른 작업자가 코드를 파악하고, 수정하기가 훨씬 용이해진다.
3. 검색 엔진은 검색을 할 때 HTML 태그를 분석하게 된다. <header>와 같이 분명한 의미를 가지고 있는 태그라면, 훨씬 구분하기가 쉬워져 상단에 노출될 확률이 높아진다.

시맨틱태그의 종류

<header> : 사이트의 헤더 영역에 사용, 주로 사이트의 로고나 이름 등이 포함된다.
<nav> : 내비게이션을 의미하는 태그로, 주로 메뉴 영역에 사용된다.
<main> : 메인 컨텐츠 영역에 사용되며, <nav>, <aside>, <article> 등이 포함된다.
<section> : 주로 <article>을 포함하는 태그로 섹션별로 나눠줄 때 사용한다.
<article> : 개별 콘텐츠, 반복되는 콘텐츠를 나타낼  때 사용한다.
<aside> : 메인 컨텐츠 이외의 내용을 담을때 주로 사용(사이드), 보통 광고나 사이드바에 사용된다.
<footer> : 페이지의 하단에 주로 고객센터나 회사 정보를 담을때 사용한다.

이처럼 html로 구조를 짤 때에도, 신경써야 할 부분이 많다.
무한 <div> 중첩 지옥을 벗어나 의미를 가지는 태그들을 사용해 보도록 노력할 것!