Semantic Web & Semantic Tag

Jiwon Lee·2022년 1월 26일
0

Semantic Web

시멘틱 웹은 웹에 존재하는 수많은 웹페이지들에 메타데이터를 지정하여 기존의 잡다한 데이터들의 집합이던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 발상

  • 검색엔진에 노출이 되지 않는 웹사이트에 접속하는 이들이 많지 않는 실상이기에, 웹사이트들은 검색엔진에 노출이 되려 너도나도 열심을 낸다.
    검색엔진은 로봇(Robot)이라는 프로그램을 이용해서 매일 전세계의 웹사이트의 정보들을 수집(이러한 것을 크롤링이라고 부른다)한다. 그리고 검색 사이트 이용자들이 검색할만한 키워드를 미리 예상해서 그에 맞는 인덱스를 만들어 놓는다.(이것을 인덱싱이라고 한다.)
    인덱스를 만들 때에, 로봇이 수집한 정보들을 바탕으로 만들어지는데 결국 웹사이트의 뼈대인 HTML 코드이다.

간단히 얘기하자면, 검색엔진은 HTML 코드로 의미를 인지하게끔 되는데 이 때, 시맨틱 요소(Semantic element)를 해석하게 되는 것이다.
아래의 예를 한번 살펴보자.

<font size="6"><b>Hello</b></font>
<h1>Hello</h1>

1행과 2행은 크기도 문장도 같은 값을 보여준다. 그러나 1행의 요소에서는 개발자의 의도가 명확하게 보이지 않는다. 폰트 사이즈와 볼드체를 넣은 메타데이터들만 보여지고 있다. 그에 반해 2행은 간략하지만 헤더(header) 중 가장 첫째 되는 의미를 부여한다는 개발자의 의도가 명확히 드러난다. 이러한 요소의 사용은 코드의 가독성을 높여주고, 차후에 있을 유지보수를 용이하게 만든다.

  • Semantic Tag

    Non-semantic 요소Semantic 요소
    div, span 등img, table, form 등
    content에 대한 설명 부족content의 의미를 명확하게 설명

다른 예로, 사이트에 이미지를 넣는 방법 2가지를 비교해보자. 첫번째는 img src 태그를 사용하는 것. 그리고 두번째는 태그에 background-image 속성을 추가하는 것이다. 첫번째의 img src 코드를 넣어 이미지를 추가하는 것은 본문에 이미지를 넣는 '삽입'하고자 하는 경우에 사용되고, background-image 속성을 이용하는 것은 말 그대로 웹페이지의 '배경'으로 이미지를 넣고자 하는 경우에 사용되는 것이다.

0개의 댓글