검색엔진 최적화와 시각장애인(스크린리더)을 위해 텍스트에 적용하는 의미있는 태그

의미없는 태그와 css로는 시각적으로 강조하는 모양은 만들 수 있으나 검색엔진과 시각장애인에게 의미는 전달할 수 없다. 검색엔진 최적화(SEO)와 시각 장애인들이 스크린 리더기를 통해 웹 사이트를 이용하는데 도움이 될 수 있도록 명확한 정보전달을 위해 의미전달이 필요한 콘텐츠가 있다면 거기에 맞는 의미있는 태그(Semantic Tag)를 사용해야 한다. 

 

이번 글에는

1. 의미있는 태그(Semantic Tag) 태그에 대한 개념과 효과
2. 텍스트에 적용할 수 있는 의미있는 태그

만 정리해본다.

의미있는 태그(Semantic Tag)

사람과 기계가 읽을 수 있는 방식으로 의미를 명확하게 설명하는 요소를 말한다.

의미있는 태그를 사용하면 아래와 같은 효과을 얻을 수 있다.

1. 검색엔진 최적화 SEO (Search engine optimization) : 제목, 부제목 등 시멘틱 테그를 잘 활용한다면, 특정 키워드로 검색했을 때, 내가 만든 웹 사이트가 검색창에 노출될 수 있다. 다시 말해서, 브라우져 검색엔진에게 내가 만든 웹 사이트를 어떤 검색 결과에 띄워줘야 될지 알려줄 수 있다.
2. 웹 접근성 : 웹페이지를 시각뿐 아니라, 음성으로 읽어주는 "스크린리더" 또는 키보드만을 이용해서 내가 만든 웹 사이트를 이용하는 경우, 적절한 시멘틱 태그로 잘 만들어진 웹 사이트라면 스크린리더, 키보드만을 이용할 때에도 문제없이 동작할 수 있다.
3. 유지보수 : 단순히 div tag로만 모든 구조를 짜는 것보다 한 눈에 알아볼 수 있어, 다른 개발자들이 코드를 유지보수 하기 더 편해진다.

html 텍스트에 적용하는 의미있는 요소

1. 텍스트 서식 관련 태그

1-1. strong

<p style="font-weight: bold">style="font-weight: bold" 를 사용했을 때</p>
<p><b>b태그</b>를 사용 했을 때</p>
<p><strong>strong태그</strong>를 사용 했을 때</p>

style="font-weight: bold", b, strong 태그 적용 후 결과 비교

 

style="font-weight: bold"와 b사용시에도 스타일은 strong와 똑같이 적용된다. 그러나 스크린 리더기에서는 일반 문장으로 인식한다. strong태그를 사용한 구문만이 스크린 리더기가 강조하며 읽고, 검색엔진에게도 강조된 문장으로 전달된다.

 

1-2. em(emphasize)

<p style="font-style: italic">font-style: italic를 사용한 이탤릭체</p>
<i>i태그를 사용한 이탤릭체</i>
<p><em>em태그를 사용한 이탤릭체</em></p>

font-style: italic, i, em 태그 적용 후 결과 비교

 

strong과 마찬가지로 font-style: italic와 i사용시에도 스타일은 em와 똑같이 적용되지만 em태그를 사용한 구문만이 스크린 리더기가 강조하며 읽고, 검색엔진에게도 강조된 문장으로 전달된다.

 

1-3. mark

<p>집에 오는 길에 <mark>우유</mark>사는 것을 잊지마라</p>

mark 적용 후 비교

 

1-4.del

<p>제품 할인 중! <del>3만원</del> 2만 8천원</p>
<p>제품 할인 중! <span style="text-decoration: line-through">3만원</span> 2만 8천원</p>

style="text-decoration: line-through”와 del 적용 후 결과 비교

 

취소선, style="text-decoration: line-through”도 똑같이 만들 수 있지만 의미전달은 할 수 없다.

 

1-5. ins

<p>내가 좋아하는 색상은 <ins>노란색</ins> 입니다.</p>
<p>내가 좋아하는 색상은<span style="text-decoration: underline">노란색</span> 입니다.</p>

style="text-decoration: underline”와 ins 적용 후 결과 비교

 

밑줄, style="text-decoration: underline”도 똑같이 만들 수 있지만 의미전달은 할 수 없다.

 

1-6. sub(아래첨자), sup(윗첨자)

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

sub, sup 적용 후 결과 비교

 

2. 인용관련 태그

2-1. blockquote

<blockquote cite="https://news.sbs.co.kr/news/endPage.do?news_id=N1006689784">
  "대한민국 국회는 인간의 과도한 화석연료 사용과 온실가스 배출증가에 따른
  기후변화로 가뭄, 홍수, 폭염, 한파, 태풍, 대형 산불 등 기후재난이 증가하고
  불균등한 피해가 발생하는 현재의 상황을 '기후위기'로 엄중히 인식하고,
  기후위기의 적극적 해결을 위하여 현 상황이 '기후위기 비상상황'임을
  선언한다." (결의안 1항 중)
</blockquote>

blockquote적용 후 결과

 

장문의 인용글 삽입시 사용, cite에는 인용글의 출처를 기재한다.

 

2-2. q

<q> 삶이 있는 한 희망은 있다 -키케로</q>

q 적용 후 결과

 

짧은 인용글 삽입시 사용

 

2-3. abbr

<abbr title="World Health Organization">who</abbr>

abbr 적용 후 결과

 

약자 title에는 약자의 풀네임을 기재한다.

 

2.5. address

<address>
  서울특별시 강남구 도산대로<br />
  <a href="mailto:1234@abc.com">1234@abc.com</a><br />
  <a href="tel:00000000000">(000) 0000-0000</a>
</address>

address 적용 후 결과

 

주소, URL, 이메일 주소, 전화번호, SNS 식별자, 좌표 등 어떠한 정보라도 포함할 수 있다. 이 중 연락처가 가리키는 개인, 조직, 단체의 이름은 반드시 포함해야 한다.

 

2-6. cite

<p><cite>절규</cite>는 1893년에 그려진 그림이다.</p>
<p><cite>개발자의 품격</cite>은 유튜브 채널이다.</p>

cite 적용 후 결과

 

제품, 그림등의 제목 혹은 명칭

 

 

무시하면 안될 부분이지만 작업하다보면 간과하기 쉬운 부분같다. 의식적으로 사용하고 습관을 들여보자.

 

---

참고자료

semantic tag에 대한 정의

Semantic HTML5 Elements Explained

semantic tag 효과

Semantic Tag 와 헷갈리는 tag들 정리

 

semantic tag의 요소 : 수업자료