웹 개발을 위한 HTML 가이드 7편 - 시맨틱 태그

시맨틱 태그

이번 글은 웹 개발을 위한 HTML 가이드 7편입니다. 이번 글에서는 시맨틱 태그에 대해 다룹니다. 태그의 이름은 아니고 태그의 분류 같은 겁니다. 지금까지 HTML이 발전하면서 다양한 태그가 생겨났습니다. HTML이 나온지 얼마 안됐을 때부터 HTML 4버전 까지만 해도 태그들이 가지는 의미는 별로 없었습니다. 어떤식으로 표현을 해도 브라우저 상에선 다 같은 것들이었죠.

그래서 현재 HTML에는 실질적인 의미와 기능이 일맥상통하는 태그가 있는가 하면 그렇지 않은 태그도 있습니다. 전자의 경우를 시맨틱 태그라고 하고 후자의 경우를 논 시맨틱 태그라고 합니다.

시맨틱은 영어 단어 Semantic 입니다. 이 단어는 의미론적인, 의미의라는 의미를 갖고 있습니다. 시맨틱 태그는 의미를 가지는 태그들의 총칭입니다. 하지만 이번 글에서 그 리스트 하나 하나를 알아보는 건 아닙니다. 이것이 왜 중요하고 왜 시맨틱 태그를 사용해야 하는지에 대해서 다뤄보도록 할 겁니다.

시맨틱 태그의 중요성

div태그는 공간을 할당하는 태그입니다. 특별한 의미를 갖고 있지 않습니다. div태그 레이아웃을 할당하는데에도 사용하고 텍스트로도 사용합니다. 어떻게 쓰냐에 따라서 달라지기 때문에 그 기능이 명확하지도 않습니다. 그리고 이런 명확하지 않은 특징은 검색엔진이나 브라우저에게도 똑같이 전달됩니다. 과거에는 아래와 같은 방식으로 웹을 구성했습니다.

<div id="header">헤더</div>
<div id="footer">푸터</div>

위의 코드처럼 개발자들이 알아볼 수 있게 id속성이나 class속성으로 구분을 해도 브라우저나 검색엔진에겐 그냥 div태그일 뿐입니다.

하지만 HTML 5버전이 나타나면서 여러가지가 바뀌었습니다. 태그 자체가 의미를 가지고 브라우저나 검색 엔진이 그 의미에 맞게끔 처리를 하게 되었습니다. 위의 코드를 요즘 사용되는 방식으로 바꾸자면 아래와 같습니다.

<header>헤더</header>
<footer>푸터</footer>

시맨틱 태그들은 브라우저도 검색엔진도 그 의미를 파악할 수 있습니다. 아직은 배우지 않았지만 img태그는 image의 약자이고 말 그대로 이미지와 관련된 태그입니다. 의미가 명확하죠. p태그는 Paragraph의 약자입니다. 문단이라는 의미죠. p태그는 텍스트 문단을 만드는 태그 입니다.

시맨틱 태그를 사용하면 지저분하게 id속성이나 class속성을 많이 사용할 필요가 줄어들게 됩니다. 물론 여전히 많은 곳에서 id속성과 class속성을 사용해야 할 겁니다. 요지는 레이아웃을 잡을 때에 사용할 필요가 사라진다는 것이죠.

이러한 시맨틱 태그는 HTML 5로 넘어오면서 생겨난 개념입니다. 웹 표준 상에서도 이러한 시맨틱 태그를 사용하는 것을 적극적으로 추천하고 있기도 합니다. 그렇기 때문에 시맨틱 태그는 사용하는 것이 좋은 것이고 되도록이면 시맨틱 태그의 활용도를 늘리는 게 중요합니다.

앞으로 우리는 다양한 태그들을 배울 겁니다. 그 중에는 논 시맨틱 태그도 있고 시맨틱 태그도 있습니다. 어떤 태그를 어떤 상황에 사용해야 하는지는 앞으로 스스로 알게 될테니 걱정하지 않아도 됩니다.

이번 글은 간단하게 시맨틱 태그에 대해서 알아봤습니다. 시맨틱 태그를 사용하는 것은 웹 페이지에 도움을 주며 검색엔진에서 페이지가 검색될 가능성을 높여주기도 하기 때문에 사용하면 좋다는 점을 다시 한 번 말씀 드립니다. 이번 글은 여기서 마치도록 하고 다음 글에서는 주석에 대해서 알아봅시다.