시맨틱 태그(Semantic Tag)와 시멘틱 웹(Semantic Web)

Semantic Web이란?

Semantic은 '의미론적'이라는 뜻으로
시맨틱 웹은 의미론적 웹이라는 뜻이다.

웹이 의미론적이라니 무슨 말일까?

 

우리의 웹에는 중요한 컨텐츠와 덜 중요한 컨텐츠가 뒤죽박죽 섞여있다.

여기서 중요한 컨텐츠는 의미가 있는 컨텐츠(제목, 본문 등)이고

덜 중요한 컨텐츠는 의미가 없는 컨텐츠(장식적인 요소)이다.

시맨틱 웹은 중요한 컨텐츠는 더 중요하게 만들고
덜 중요한 컨텐츠는 덜 중요하게 만들자는 아이디어이다.  
여기서 컨텐츠의 중요도는 컨텐츠에 의미가 있느냐에 달려있다.

 

시맨틱 웹은 컨텐츠를 의미에 따라 나누어 조직하기 때문에 

의미론적이라고 할 수 있다.

Semantic Tag이란?

시맨틱 웹을 구현하기 위해서는 시맨틱 태그, 그러니까 의미가 있는 태그를 사용하면 된다.

ex) Non-Semantic 태그 : div, span 등
ex) Semantic 태그 : h1~h6, form, table, img, aside, main, section, header, footer 등

예 1: <H1> VS <div>

Non-Semantic 태그인 div은 특별한 의미가 없고 어디에나 사용할 수 있다.
하지만 Semantic 태그인 h1은 '여기 웹페이지의 제목이 있다'는 의미를 가지며
웹페이지의 제목 부분에만 사용해야 한다.

가상의 웹페이지에 아래 코드가 있다고 생각해보자.
이 웹페이지는 시맨틱 웹에 대한 내용을 담고 있고
웹페이지의 제목은 'Semantic Web이란?'이다.

<div>Semantic Web이란</div>
<h1>Semantic Web이란</h1>

<div>Semantic Web에 대한 내용내용</div>

'Semantic Web이란?'이라는 컨텐츠를 div으로 감싸면 본문과 동등하게 읽히고 처리된다.
(여기서 이 html 문서를 읽는 것은 개발자일 수도 있고, 검색엔진의 로봇일 수도, 시각장애인의 스크린리더기일 수도 있다.)
하지만 이 문장을 h1으로 감싸면 인간도 로봇도 이것이 제목이라는 것을 쉽게 알 수 있다.

예 2: <img> VS <div>

한 가지 사례를 더 보자.

HTML 문서를 작성할 때 두 가지 방법으로 이미지를 넣을 수 있다. 

첫 번째 방식은 div에 css스타일을 적용하여 이미지를 삽입하는 방식이고

두 번째 방식은 img 태그로 이미지를 넣는 방식이다.

<div style="background-img: url('cat.jpeg')"></div>
<img src="cat.jpeg">

div은 Non-Semantic 태그이므로 css 속성 'background-img'으로 div에 들어간 이미지는

웹페이지를 장식하기 위해 넣은 이미지, 즉 덜 중요한 이미지로 읽힌다. 

 

img는 해당 컨텐츠가 이미지라는 의미를 갖는 Semantic 태그이므로 img를 통해 들어간 이미지는

유의미한 이미지로 읽히고 처리된다.

 

img 태그를 사용할 것인가, div 태그를 사용할 것인가는 이미지를 사용하는 맥락에 따라 결정해야 한다. 

Semantic Tag의 장점

위에서 semantic tag를 사용한 요소는 더 중요하게 읽히고 처리되며, 

여기서 html 문서를 읽는 것은 개발자일수도, 검색엔진의 로봇일 수도, 시각장애인의 스크린 리더기일 수도 있다고 했다.

각 경우별 Semantic tag를 사용했을 때의 장점을 정리하면 다음과 같다.

1. 개발자가 읽는 경우 - 코드 가독성 향상

의미 없는 div를 사용하는 것보다 시맨틱 태그를 사용했을 때 코드를 검색하고 수정하기가 훨씬 편리하다. 

2. 검색엔진의 로봇이 읽는 경우 - 검색엔진 최적화(SEO, Search Engine Optimization)

검색엔진은 로봇이라는 프로그램으로 전세계 모든 웹사이트 정보를 수집하고(=크롤링),

로봇이 수집한 정보를 바탕으로 사용자가 검색할 만한 키워드를 예측하여 인덱스를 만들어둔다(=인덱싱).

 

로봇은 웹사이트의 HTML 코드를 읽어 크롤링과 인덱싱을 수행한다.

HTML을 시맨틱 태그로 잘 작성하면 내가 원하는 내용을 로봇에게 노출할 수 있다.

즉, 내가 원하는 내용을 검색 결과에 띄울 수 있다는 말이다.

 

예를 들어 로봇은 h1 요소를 높은 확률로 인덱스에 포함시킨다.

h1 요소는 웹페이지를 요약하는 가장 중요한 제목에 사용한다는 것을 알기 때문이다.  

적재적소에 h1을 사용하면 사람들이 우리의 웹페이지를 더 잘 찾아올 수 있다.

3. 스크린 리더기가 읽는 경우 - 웹 접근성 향상

장애인, 노인을 포함한 모든 사용자가 어떤 환경에서든

웹사이트의 정보에 접근할 수 있도록 하는 것을 웹 접근성이라고 한다. (참고 - HTML로 웹 접근성을 높이는 방법)

 

장애인 유저의 사용하는 보조 기기는 시맨틱 구조에 기반하여 유저에게 정보를 전달하기 때문에

시맨틱 태그를 사용하면 웹 접근성을 높이는 데도 도움이 된다.

 

예를 들어 시각장애인에게 텍스트와 이미지를 읽어주는 스크린 리더기는 

CSS 문서의 의미 없는 컨텐츠(화면의 레이아웃이나 장식적인 요소)는 생략하고

HTML 문서에 기반한 의미 있는 컨텐츠만 읽어준다.

 

따라서 HTML 문서가 시맨틱 태그로 잘 조직되어 있으면

스크린 리더기를 사용하는 유저가 더 쉽게 웹페이지를 탐색하고

원하는 정보에 더 빠르게 접근할 수 있다.

 

 

 

참고
시맨틱 웹, 시멘틱 태그

웹 접근성이란?

Semantic HTML: the foundation of web accessibility