Semantic Web
- 정의 : '의미론적인 웹'이라는 뜻으로 컴퓨터가 이해할 수 있는 형태로 제작된 웹
웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상
컴퓨터가 이해할 수 있는 형태란 무엇일까?
이를 이해하기 위해 시멘틱 웹이 고안되기 전 기존의 웹을 보면,
<div id="header">title</div>이 요소는 의미론적으로 어떤 의미도 가지고 있지 않은,
즉 의도가 명확하지 않은 태그이다.
하지만 Semantic Tag로 작성할 경우 아래와 같이 작성할 수 있다.
<header>tilte</header>Semantic Tag
-
정의 : 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 하는 태그
-
종류
- article : 각각의 내용으로 나누는 구분을 의미
- aside : 주요 내용 이외의 문서 내용을 의미. ex) 블로그의 사이드 바
- footer : 문서의 푸터를 의미. ex) 저작자나 저작권 정보 등
- header : 문서의 헤더를 의미. ex) 사이트소개나 로고 등
- nav : 내비게이션을 의미. ex) 웹 문서 내의 메뉴 등
- section : 문서의 내용을 의미. ex) 웹 문서의 본문 등
-
non-semantic 태그
- content에 대하여 어떤 설명도 하지 않음
- div, span
-
사용 이유
<div id="header">title</div>
<header>tilte</header>위 두 가지 경우는 브라우저 상에서 동일하게 표현지만, 이렇게 시맨틱 태그로 표현된 태그는 header(제목)이라는 의미를 내포하기 때문에 개발자가 의도한 요소의 의미가 명확히 드러나며 이것은 코드의 가독성을 높이고 유지보수를 쉽게 해준다. 또한, 검색엔진은 대체로 header 요소 내의 콘텐츠를 웹문서의 중요한 제목으로 인식하고 인덱스에 포함시킬 확률이 높아지기 때문에 효과적인 크롤링과 인덱싱이 가능해진다.
결론
Semantic Tag란 콘텐츠의 의미를 명확하게 설명하는 태그로서 그 종류로는 header, footer 등이 있다. Semantic Web은 이러한 Semantic Tag들을 기반으로 제작된 웹을 말하며, 명확한 의미 전달, 유지 보수와 검색 용이 등의 측면에서 웹의 구조를 semantic하게 구조를 짜는 것은 중요하다.
관련 질문
이미지를 추가하는 두 가지 방법과 차이점 설명
이미지를 추가하는 방법으로는 HTML 태그인 < img >를 사용하는 것과 해당 태그에 CSS 속성인 background-image 를 추가하는 것이 있다.
< img >는 의미가 있는 시맨틱 태그로서 컴퓨터가 직접적으로 이해할 수 있는 의미를 담았기 때문에 이미지가 깨져도 컴퓨터는 alt속성으로 이 이미지를 이해할 수 있고 검색엔진에 웹이 잘 노출되길 원한다면 이 방법을 쓰는 것이 좋다.
하지만 background-image는 이미지에 대한 정보를 가지고 있지 않기 때문에 단순히 디자인적으로 꾸미기 위한 목적이라면 css속성으로 꾸미는 것이 가독성과 유지보수 측면에서 효율적일 것이다.
