.png)
Semantic Web
시맨틱 웹의 탄생과정
웹은 1991년 팀 버너스 리에 의해 공개된 후 큰 발전을 이뤘지만 웹을 사용하는 사용자와 정보의 양이 증가하면서 정확한 정보를 찾는데 어려움이 생기는 등 한계가 드러나게 되었다.
이 문제는 기계가 데이터의 의미를 이해하는데 어려웠기 때문에 발생했는데 이런 문제를 해결하기 위해 팀 버너스 리는 시맨틱 웹이라는 차세대 웹 기술을 제안했다.
위의 영상은 시멘틱 웹을 창안한 팀 버너스리가 시멘틱 웹을 소개하는 TED영상이다.
시맨틱 웹이란?
웹 상에 존재하는 정보를 사람 뿐 아니라 기계가 의미를 파악하고 사용자의 요구에 적합한 결과를 서비스 가능하도록 하는 것.
쉽게 말해 시맨틱 웹이란 의미를 가지는 웹이다.
일반 웹과 시맨틱 웹
| 일반 웹 | 시맨틱 웹 |
|---|---|
| 정보의 의미를 컴퓨터가 알지 못함. | 정보의 의미를 컴퓨터가 알 수 있음. |
| 키워드가 틀린 경우 검색이 불가능함. | 의미적 추론에 의해 검색이 가능함. |
✔️ 즉, 시맨틱 웹이란
💡 기계가 정보를 읽고 활용해 새로운 정보를 만들어 낼 수 있도록 이해하기 쉬운 의미를 가진 프레임워크이자 기술
간단한 예제
검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집한다. (= 크롤링)
내가 작성한 코드를 검색엔진에 노출하고 싶다고 가정해보자.
<!-- 예제 1 -->
<font size="6"><b>Hello</b></font>
<!-- 예제 2 -->
<h1>Hello</h1>예제 1과 예제 2의 코드는 브라우저 상에서 동일하게 나타나지만 예제 1은 개발자의 의도를 명확하게 나타내지 않는다. 그러나 예제 2는 header 태그중 가장 상위 레벨이라는 의미가 명확히 드러난다.
-> 코드의 가독성을 높이고 유지보수를 쉽게 한다.
-> 검색 엔진에서 검색이 용이하다.
Semantic Tag
시맨틱 태그란?
브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 의미있는 태그
태그가 의미를 가짐으로써 검색엔진의 크롤러에게 사이트에 대한 자세한 정보를 제공할 수 있다.
non-semantic Tag와 semantic Tag
| non-semantic Tag | semantic Tag |
|---|---|
<div>, <span> | <form>, <nav>, <table>, <img> |
| content에 대하여 어떤 설명도 하지 않음. | content의 의미를 명확히 설명함. |
시맨틱 태그의 장점
- SEO (검색 엔진 최적화, Search Engine Optimization) : 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 한다.
- 코드 관리가 용이하다.
HTML5에서 추가된 시맨틱 태그
| Tag | Description |
|---|---|
| header | 문서의 머릿글 |
| nav | 같은 사이트내의 링크나 다른 사이트로의 링크들의 모음 |
| aside | 사이드에 위치하는 공간 (링크, 광고, 사이드바 등) |
| section | <header>, <footer>와 함께 문서의 구역을 정의. 본문의 여러 내용(article)을 포함하는 공간 |
| article | 본문의 주 내용이 들어가는 공간 |
| footer | 문서의 바닥글. 주로 저작권, 연락처 정보 등 내용이 삽입 |
Semantic Tag 사용의 예제
사이트에 이미지를 넣는 방법은 두 가지가 있다. img 태그를 사용하는 것과 div태그에 background-image 속성을 추가하는 것.
그렇다면 두 가지 방법의 차이점은 무엇일까?
img태그 사용
<img>라는 html 태그로 이미지를 생성한다.- alt속성을 통해 이미지가 표시되지 않았을 경우 이미지에 대한 간략한 정보를 알 수 있다.
- alt속성에 작성된 내용은 이미지의 meta정보가 되며, 검색엔진은 alt속성의 내용을 읽는다.
background-image 사용
- 태그가 아닌 css를 이용해 이미지를 생성한다.
- css를 이용하기 때문에 이미지 수정이 잦은 경우에 수정이 용이하다.
- 단순한 이미지 첨부일 뿐, 어떠한 내용도 담지 않는다.
<img> 태그: 검색 엔진에 나의 이미지가 노출되어야 하고 해당 이미지에 대한 정보를 담은 페이지를 만들고 싶을 때 사용한다.
css background-image 속성: 단순히 페이지의 장식을 목적으로 할 때 사용한다.
