HTML 시멘틱 태그

HTML 시멘틱 태그(semantic tag) – HTML/CSS 따라하기 6

by

HTML 시멘틱 태그

HTML 태그 중에서는 사람에게 의미를 전달하는 것 보다 프로그램에게 의미를 전달하기 위한 태그가 있습니다. 이들은 검색엔진이나 장애인을 위한 스크린 리더 등 필요한 프로그램에게 추가적으로 정보를 전달하는 것을 우선으로 합니다. 물론 이들 태그 중에는 사람이 문서를 봤을 때 외적인 차이가 있는 경우도 있습니다만, 기본적으로는 사람보다 이를 사용하는 시스템에 포커스를 맞춘 태그입니다.

약간 개념이 까다로울 수 있습니다만, 쉽게 말하면 구글의 검색엔진이 이 정보들을 사용합니다. 물론 시멘틱 태그를 사용한다고 꼭 구글의 SEO에서 상위 랭킹을 받는것은 아니지만 이러한 태그를 적절히 사용해서 작성한 웹페이지는 아무래도 검색엔진이 인덱스를 만드는데 더 수월하고 이는 웹사이트의 빠른 성장과 연결되는 부분입니다.

비슷하게 경쟁하는 웹사이트라면 아무래도 시멘틱 태그를 잘 쓰는 쪽이 높은 랭크를 받을 가능성이 높습니다. 한국은 거의 대부분의 사람들이 네이버 블로그를 하고 또 티스토리 같은 CMS를 사용하는 비율이 있는데 CMS라면 대체적으로 시멘틱 태그를 제대로 사용하기 어렵습니다.

이런 상황에서 시멘틱 태그를 신경써서 문서를 잘 구조화 한다면 잘 먹히지 않을까 생각이 듭니다.(다만 구글의 SEO 알고리즘은 복잡하므로 한가지만 잘한다고 점수를 잘 받는 것은 아닙니다)

몇가지 시멘틱 태그를 알아보겠습니다.

strong 과 em

strong의 의미는 중요하다는 것 입니다. em은 emphasize(강조하다)는 뜻입니다. 이 태그를 사용하면 본문에서 중요하거나 강조하고 싶은 부분을 검색엔진 등에 어필할 수 있습니다.

    <p><strong>스트롱 태그</strong>가 있습니다.</p>
    <p><em>em 태그</em>는 강조입니다.</p>

스트롱 태그가 있습니다.

em 태그는 강조입니다.

ins와 del

ins는 insert로 문서에 삽입하는 내용입니다. del 태그는 삭제하는 내용입니다. 밑줄과 가로줄을 긋습니다. 가로줄을 그어도 사라지지는 않겠지만

    <p><ins>인서트 태그</ins> 입니다.</p>
    <p><del>delete 삭제 태그</del> 입니다.</p>

인서트 태그 입니다.

delete 삭제 태그 입니다.

그밖의 시멘틱 태그

저자에 대한 정보를 넣는 address 태그, 축약어를 해설하는 abbr 태그, 속담이나 격언의 blockquote, q 태그 논문 등을 인용하는 cite, 첫번째로 용어를 정의하는 dfn 태그 등이 있습니다.

        <address>
        <p>myemail@email.com</p>
        <p>Seoul, Korea</p>
        </address>
        <p>
            <abbr title="Republic of Korean Army">ROKA</abbr>
        </p>
        <p>
            <blockquote>
                Time flies
            </blockquote>
            <q>
                Time is gold.
            </q>
        </p>
        <p>
            <cite>Selfish Gene</cite>
        </p>
        <p>
            <dfn>Object Oriented Programming</dfn>
        </p>

myemail@email.com

Seoul, Korea

ROKA

Time flies
Time is gold.

Selfish Gene

Object Oriented Programming

요약

h1 h2 이런 태그들도 시멘틱 가치(semantic value)가 있습니다. 시멘틱 요소가 SEO에서 중요한 것은 사실이지만 몇년간 마케터들에 의해서 SEO에 대한 abusing 이 많았고 지금은 의미가 좀 퇴색된 느낌이 있습니다.

그래서 지금은 기본적인 시멘틱 태그만 잘 활용하는 것으로 충분히 활용이 가능하기 때문에 큰 비중을 두는 사람들은 국내나 해외나 별로 못 본것 같습니다. 물론 시멘틱 요소가 점수적으로 차이가 나긴 합니다. 하지만 콘텐츠가 없으면 아무리 완벽한 시멘틱 태그를 사용한다고 해도 큰 의미는 없습니다. HTML 태그 중에서도 시멘틱 태그는 일종의 실험적인 부분이 있습니다.

구글 검색엔진의 SEO 알고리즘이 진화되고 AI와 머신러닝이 도입되면서 시멘틱 태그를 열심히 써서 만드는 문서보다는 콘텐츠가 훌륭한 문서가 더 우대를 받고 있습니다.

그래서 시멘틱 태그 취지는 좋은데 지금 너무 깊이 팔 것인가는 의문이 듭니다. 반응형 웹페이지 스케레톤에서 설명하려고 이 포스팅에서는 다루지 않았지만 header나 section 등 문서의 와꾸를 짜는 정도로 사용하는 정도가 괜찮을 것 같습니다. 그것들은 별도의 포스팅에서 다룰 생각입니다.

홈으로

참고문서

Semantics – 용어 사전 | MDN (mozilla.org)

Leave a Comment