[Restart 프론트엔드 스터디] #3. 시맨틱 웹 (출처: poiemaweb)

Semantic Tag (시맨틱 태그)

대부분의 인터넷 사용자들이 정보를 취득하기 위해 검색엔진을 사용한다.

현 시대에서 그만큼 검색엔진에 최적화 된 웹 사이트를 만드는 것은 중요하다고 할 수 있다.

 

검색엔진 최적화(SEO)를 위해서는

검색엔진이 웹사이트 정보를 수집하는 방법에 대해서 이해할 필요가 있는데,

 

검색엔진은 로봇이라는 프로그램을 이용하여

웹사이트의 HTML 코드를 수집하게 된다.

 

이 때, 검색엔진은 HTML 코드만으로 그 의미를 인지하여야 하고

HTML 코드 중에서도 의미론적 요소 즉, 시맨틱한 요소(Element)를 해석하게 된다

 

이 의미론적인 요소를 충족하기 위해서 필요한 것이

바로, 시맨틱 태그이다.

 

아래의 코드 두 줄을 확인해보자.

<font size="6"><b>Hello</b></font>
<h1>Hello</h1>

 

이 코드를 실행시킨 결과(화면)를 확인해보면
눈으로는 구분하기 어려울 것이다.

 

그러나 코드를 통해 확인을 해본다면,

1행의 경우 어떠한 의미도 갖고 있지 않지만

(non-semantic element, 시맨틱하지 않은 요소)

 

2행의 경우 Heading이라는 태그를 사용하여

이 문자열의 중요도 등에 대한 의미를 부여하고 있다

(semantic element, 시맨틱한 요소)

 

2열의 <h1>이 바로 이러한 시맨틱 태그에 해당한다.

즉, 시맨틱 태그는 브라우저, 검색엔진, 개발자 모두에게

해당 요소 전체의 의미를 명확히 설명하는 역할을 한다고 볼 수 있다.

 

시맨틱 태그를 사용함으로서 의미부여가 명확해지는 덕분에

코드의 유지보수 측면에서도, 검색엔진 최적화 측면에서도 장점을 가져가는 것이다.

---

Semantic Web(시맨틱 웹) - 참조

시맨틱 웹은 HTML의 최초 설계자라고 할 수 있는 팀 버너스리가 제안한 방법론으로

 

웹에 존재하는 수많은 웹 페이지들에 대하여 메타데이터(metadata)를 부여하고,

잡다한 데이터 집합체였던 웹 페이지를 '의미'와 '관련성'을 통해

이를 자동화된 기계가 처리할 수 있는 데이터베이스로 구축하고자 하는 발상이다.

---

HTML Semantic Element (출처: poiemaweb.com / 이미지 클릭시 이동)

HTML5에서 추가된 시맨틱 태그

header	헤더를 의미한다
nav	내비게이션을 의미한다
aside	사이드에 위치하는 공간을 의미한다
section	본문의 여러 내용(article)을 포함하는 공간을 의미한다
article	분문의 주내용이 들어가는 공간을 의미한다
footer	푸터를 의미한다