Semantic web이란?
시맨틱 웹 은 "의미론적인 웹"
즉, 기계가 이해할 수 있는 형태로 제작된 웹을 의미한다.
조금 어렵게 이야기 한다면,
Semantic web이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.
이게 도대체 무슨 말이냐고? 이제 부터 천천히 파악해 보자!
요즘 사람들 중 google, naver와 같은 검색 엔진을 사용하지 않는 사람을 찾기는 어려울 것이다.
이러한 검색엔진들은 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집한다.(이것을 크롤링이라 하며 검색엔진의 크롤러가 이를 수행한다.)
그리고 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어 둔다. (이것을 인덱싱이라 하며 검색엔진의 인덱서가 이를 수행한다.)
인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 결국 웹사이트의 HTML 코드이다. 즉, 검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데 이때 시맨틱 요소(Semantic element)를 해석하게 된다.
사례를 살펴보도록 하자.
<font size="6"><b>Hello</b></font>
<h1>Hello</h1>위의 코드는 웹페이지에서 보면 아래 사진과 같이 비슷하게 나타난다.
그러나 1행의 요소는 의미론적으로 어떤 의미도 가지고 있지 않다. 즉, 의도가 명확하지 않다. 개발자가 의도한 요소의 의미를 명확하게 나타내지 않고 다만 폰트 크기와 볼드체를 지정하는 메타데이터만을 브라우저에게 알리고 있다. 그러나 2행의 요소는 header(제목) 중 가장 상위 레벨이라는 의미를 내포하고 있어서 개발자가 의도한 요소의 의미가 명확히 드러나고 있다. 이것은 코드의 가독성을 높이고 유지보수를 쉽게한다.
검색엔진은 대체로 h1 요소 내의 콘텐츠를 웹문서의 중요한 제목으로 인식하고 인덱스에 포함시킬 확률이 높다.
시맨틱 요소로 구성되어 있는 웹페이지는 검색엔진에 보다 의미론적으로 문서 정보를 전달할 수 있고 검색엔진 또한 시맨틱 요소를 이용하여 보다 효과적인 크롤링과 인덱싱이 가능해졌다.
즉, Semantic Tag란?
Semantic Tag란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다. 검색엔진에게도 의미론적으로 중요한 부분과 덜 중요한 부분을 파악할 수 있게 해주어 효율적인 검색으로 하도록 만든다.
이러한 Sematic Tag의 종류로는
<section> , <header> , <nav>, <aside>, <article>,<footer> 등이 있으며 이외에도 여러가지가 있다.
또 이와 반대되는 non-semantic tag도 있는데 <div>,<span>과 같은 태그들이 이것에 속한다.
결론적으로!
Semantic Tag에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 Semantic Web이 실현될 수 있다.
그리고 이와 같은 내용들을 알고 나면 아래의 질문에 쉽게 답할 수 있을 것이다
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다.
<img>태그를 사용하는 것과<div>태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
이에 대한 나의 답변은 이러하다!
만약 이미지가 인덱싱되어 검색엔진에 서치되기를 원한다면 <img>태그를 이용하여 이미지를 삽입할 것이다. img 태그에는 alt="" 로 이미지에 대한 설명을 넣을 수 있어 SEO(Search Engine Optimization,검색엔진 최적화)에 노출되는 용도로 사용이 가능하기 때문이다.
그러나 만약 해당 이미지가 그저 장식용이거나, 검색엔진에 서치되기를 원하지 않는다면 background-image 속성을 이용해 이미지를 삽입할 것이다. ☺️
