Semantic Web

시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻이다.

의미론적인 웹은 말 그대로 컴퓨터가 웹사이트를 단순한 코드의 구성이 아닌 의미를 가진 사이트라는걸 알 수 있게 만드는 것이다. 시맨틱 웹의 이상향은, 인터넷에 방대한 양의 데이터를 컴퓨터가 자동으로 해석해 사용자가 원하는 결과값(검색결과)을 정확히 주는 것이다.

검색엔진

검색 엔진은 컴퓨터 시스템에 저장된 정보를 찾아주는 것을 도와주도록 설계된 정보 검색 시스템이다. 우리는 검색의 시대에 살고있다. 웹사이트에서 검색 엔진 노출은 정말 중요하다.
검색 엔진 최적화 (SEO, Search Engine Optimization)
검색 엔진 최적화는 웹 페이지 검색 엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과를 상위에 노출 될 수 있도록 하는 작업을 말한다.
검색 엔진은 HTML코드 만으로 웹사이트의 의미를 인지하는데 이 때 시멘틱 요소(Sementic element)를 해석하게 된다.

쉽게말해 시멘틱 구조란, 검색엔진에 많이 걸리도록 해서 상위노출 되게 해주는 HTML구조 이고 시멘틱 웹 이란 그러한 구조를 가진 웹페이지를 말한다.

검색엔진에 이어 부가 설명을 해보자면, 이미지를 넣는데에 있어서는 두가지 방법이 있다.

<img alt="사자사진" src="...">
div {background-image:url();}

여기서도 마찬가지로 이미지 태그 안에 있는 alt속성에는 정보를 담을수 있다. 그래서 웹접근성 에도 중요한 요소 있지만 검색엔진에 있어서도 검색결과에 걸리게끔 해주기 때문에 중요한 역활을 한다.
반대로 css로 백그라운드이미지 로 깔아버린다면, 그 안에 정보를 담지 못하기 때문에 어떠한 역활도 하지 못한다.

Semantic Tag

시멘틱 웹, 시멘틱 구조에 대해 알아보았다면 이제 그것을 구성하는 시멘틱 태그에 대해 알아보자.

앞서 Semantic Web 에 대해 이야기 할때 언급 했듯이, 시맨틱(Semantic)은 "의미의, 의미론적인"이라는 뜻이다.
HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공하게 된다.

<div> 태그는 non-semantic 태그라고 할 수 있고, 
<table>, <article> 등의 태그는 semantic 태그라고 볼 수 있다.

article 여러개의 내용으로 나누는 구분을 의미한다. 본문 내의 세부 절 등에 사용 된다.
aside 주요 내용 이외의 문서 내용을 의미한다. 블로그의 사이드 바 등에 사용된다.
footer 문서의 푸처를 의미한다. 저작자나 저작권 정보 등에 사용된다.
header 문서의 헤더를 의미한다. 사이트소개나 로고 등에 사용된다.
nav 내비게이션을 의미한다. 웹 문서 내의 메뉴 등에 사용된다.
section 문서의 내용을 의미한다. 웹 문서의 본문 등에 사용된다.

시멘틱태그는 이외에도 더 있지만 가장 대표적인 것 만 알아보았다.

HTML5 이전에는
<div class="header"></div> 이렇게 쓰이던 것이
<header></header> 이렇게 바뀐것 이다.