[HTML] 시멘틱 태그(Semantic Tag) 왜 쓰나요?

 

시멘틱 태그(Semantic Tag)?

시멘틱 태그란 의미를 갖고 있는 태그를 의미합니다. 그럼 이 의미를 갖는 다는 게 무슨 말일까요?

 

예를 들어, 두꺼운 글씨를 표현하기 위한 방법으로 아래와 같이 3가지가 있습니다.

여기서 맨 마지막 줄이 시멘틱 태그 <strong>을 사용한 예입니다.

 

  <p style="font-weight: bold">1. 볼드체</p>
  <p><b>2 .볼드체</b></p>
  <p><strong>3. 볼드체</strong></p>

그리고 그 결과는 아래 사진과 같습니다. 

 

맨 아래 3번 볼드체가 시멘틱 태그, strong을 사용한 예 입니다.

 

 

 

 

구분이 되시나요? 

디자인적으로 보기에는 전혀 차이가 없습니다. 그럼에도 시멘틱 태그를 사용하는 이유는 시각적, 디자인적으로 보이는 부분은 같지만 프로그래밍 관점으로 볼 때는 명확히 구분이 되기 때문입니다.

위에서 말했듯이, <strong>은 강조의 의미를 갖고 있는 태그입니다. 

 

쉽게 얘기해서, "컴퓨터한테 강조하는 문구를 찾아보세요"라고 물어보면

 

   "컴퓨터는 3.볼드체 이건 중요하군요!"

 

하고 외칠 겁니다. 그런데 1.볼드체, 2.볼드체는 강조태그의 의미를 갖고 있지 않기 때문에, 컴퓨터는 그저 일반문구로 취급해 버립니다. (특히, 맨 윗줄에 style속성의 경우, 그림을 그리듯 디자인으로 표현만 했을 뿐 아무 의미를 담고 있지 않습니다.)

 

 

 

 

 

 

그럼 이걸 어떻게 활용할까요?

시멘틱 태그를 활용함으로 얻을 수 있는 이점은 아래와 같습니다.(이 외에 더 있을 수도...)

 

1. 검색 최적화(Search engine optimization, SEO)

시멘틱 태그를 활용하여 특정 키워드 검색에 맞게 해당 웹사이트가 노출되게 할 수 있습니다. 정보가 범람하는 이 시대 수요자에게 내 웹사이트를 노출시키고 싶다면 시멘틱 태그를 활용하여 노출빈도를 높일 수 있습니다. (style속성으로만 작성한다면, 잡아낼 특징이 없는 웹문서이니 무시받기 딱 좋겠습니다.)

 

2. 웹 접근성

웹을 "스크린 리더"처럼 음성으로 제공하는 경우 시멘틱 태그를 활용할 경우 제공이 수월합니다. 웹이 시각적 정보로만 제공될 경우 눈이 불편하신 분들에 대한 접근을 제한하는 꼴이기 때문에, 넓은 접근성을 제공하기 위해 이 점을 항상 고려해야 됩니다.

 

3. 유지보수성

시멘틱 태그를 활용해 코드를 구성한 경우, 다른 개발자들이 유지보수하는데 수월합니다.

 

 

 

 

 

 

시멘틱 태그의 다양한 사례

볼드체 예시말고도 많은 시멘틱 태그들이 있습니다.

여기서는 일부 예시만 소개하며, 아래 시멘틱 태그들은, 얼마든지 style태그로 디자인은 똑같게 만들 수 있으나 의미는 내포하고 있지 않다는 점을 유의해주시기 바랍니다.

 

 

1. em(emphasize) : 강조하는 이탤릭체

<p><em>강조하는 이탤릭체</em></p>

 

 

 

2. small : 일시적으로 작은 글씨 크기(주로 주의,참고사항 등)

p>텍스트가 <small>작게</small> 됩니다</p>

 

 

 

3. mark : 하이라이트된 텍스트

<p>올 때 <mark>메로나</mark> 좀!</p>

 

 

 

4. del : 취소선, 삭제된 텍스트 표현

<p>제품 할인! <del>5만원</del> -> 2만5천원</p>

 

 

 

5. ins: 밑줄

<p>내가 제일 좋아하는 색은 <ins>노란색</ins> 입니다 </p>

 

 

 

6. sub/sup : 아래 첨자, 윗 첨자

<p>X <sub>2</sub></p>
<p>X <sup>2</sup></p>

 

 

 

 

 

7. blockquote : 긴글 인용

<blockquote cite="">
        현재 애국가의 가락(작곡)은 안익태가 작곡하였고, 이 가락만이 현재 공식적인 가락으로 사용되고 있으며 가사는 대한민국 임시정부 시기에서 거의 그대로 전승되었다. 정확히는 대한민국 임시정부에서는 안익태가 작곡한 현재의 가락에 따른 애국가가 1940년 12월 20일부터 사용되었으며 1941년에 광복군 결성식에서 불려진 것을 계기로 그리고 일제의 탄압으로부터 자유로운 미주 등 해외에서는 한인계 라디오 방송에서 송출되는 등 적극적으로 보급되었으며 이후 공식적으로 국가로 명문화한 시점은 1942년이다.
        <!-- 긴 문장을 인용하는데 사용(cite안에 출처를 적어줄 수 있음) -->
    </blockquote>

 

8. q : 짧은글 인용

<q>짧은 문장 인용하는 데 사용</q>

 

 

 

 

9. abbr : 축약어 표기

<abbr title="World Health Oraganization">WHO</abbr>
    <!-- 축약어를 위한 abbr태그 동시에 tilte 속성으로 설명 -->

 

 

 

10. address : 주소

  <address>대한민국 경기도 광명시</address>
    <!-- 주소를 의미 -->

 

 

 

11. cite : 주로 그림, 영화 등의 작품표기

    <p><cite>모나리자</cite> 작가가 누군가요</p>
    <!-- 작품명을 의미 -->