Semantic Tag와 Semantic Web

Semantic Tag

HTML5 이전에는 각각의 태그를 직접 정의하여 사용하였다면

<div id="nav"> # 탐색글
<div class="header"> # 머리글
<div id="footer"> # 바닥글

HTML5에서 Semantic Tag는 컴퓨터와 개발자 모두에게 태그의 의미가 전달가능하다.

예를 들어 이미지 파일을 웹에 삽입 하는 방법으로
img 태그를 사용하거나,
css를 이용하여 태그에 background-image 속성을 추가하는 두 가지 방법이 있다.

css를 이용하여 삽입(non-semantic)하면 semantic tag가 아니므로 컴퓨터가 이해할 수 없으며, 다른 사람이 이해하기 쉽지 않다.
반대로 img태그(semantic tag)를 이용하여 삽입하면 컴퓨터도 이미지 파일인 것을 이해하고,활용 할 수 있다.

Semantic tag의 장점

검색 엔진에서 검색 랭킹에 키워드로 사용가능
클래스 이름이 있든 없든 수 많은 div 태그를 탐색하는 것보다, 정의 된 태그를 찾는게 더 편함
개발자에게 태그 안에 채워질 데이터 유형을 제안

Semantic tag의 종류는 아래와 같다

<header> # 페이지 상단이나 섹션의 머리말
<nav> # 문서의 네비게이션, 메뉴 항목을 정의
<section> # 문서의 구획들을 정의
<article> # 본문
<aside> # 글의 주제와 간접적으로만 연관된 부분을 나타냄
<figure> # 사진 등과 같은 부가적인 요소를 정의
<footer> # 문서나 특정 세션의 footer를 정의
<details> # 추가적인 정보를 사용자가 숨기거나 보일 수 있게함
<summary> # 부모요소인 details 요소의 내용에 대한 요약이나 캡션등을 나타냄
<mark> # 하이라이트 또는 참조와 같은 표시를 필요로 하는 문자를 정의
<time> # 날짜, 시간을 정의

Semantic Web

은 '의미론적인 웹'이라는 뜻으로 컴퓨터가 이해할 수 있는 형태로 제작된 웹을 의미한다.
Semantic Tag가 Semantic Web을 만들기 위해 만들어졌다고 할 수 있다.