2. 시맨틱 요소와 검색 엔진

대부분의 인터넷 사용자는 원하는 정보를 취득하기 위해 Google, Naver, Daum과 같은 검색사이트를 이용한다. 고로 웹사이트는 검색엔진에서의 노출이 매우 중요하다.

검색엔진은 로봇이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집한다(->이것을 크롤링이라 하며 검색엔진의 크롤러가 이를 수행)

그리고 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)를 만들어준다.(-> 이것을 인덱싱이라 하며 검색엔진의 인덱서가 이를 수행)

인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 결국 웹사이트의 HTML 코드이다. 즉 검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 되는데 이때 시맨틱 요소를 해석한다

 

이 2행은 모두 Hello World 라는 단어를 출력하는데

첫 번째 행은 어떤 의미를 가지고 있진 않고 굵은 글씨의 Hello World를 나타내는 것이고 

두 번째 행은 header(제목)라는 가장 상위 레벨의 의미를 내포하고 있어서 개발자가 의도한 요소의 의미가 명확히 드러나고 코드의 가독성을 높이며 유지보수를 쉽게한다.

검색엔진은 주로 h1 요소 내의 내용을 웹문서의 중요한 제목으로 인식하고 인덱스에 포함시킬 확률이 높고 사람도 h1 요소 내의 내용이 제목임을 인식할 수 있다.

시맨틱 요소로 구성되어 있는 웹페이지는 검색엔진에다가 의미있게 문서 정보를 전달할 수 있고 검색엔진 또한 시맨틱 요소를 이용하여 보다 효과적인 크롤링과 인덱싱이 가능해졌다.

 

즉 시맨틱 태그란 웹브라우저, 검색엔진, 개발자 모두에게 내용의 의미를 명확히 설명하는 역할을 한다.

시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.

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

 

HTML 요소는 non-semantic 요소 , semantic 요소로 구분할 수 있다.

1) non-semantic 요소 - div, span 등이 있고 이 태그들은 내용에 대하여 어떤 설명도 하지 않는다

2) semantic 요소 - form, table, img 등이 있고 이들 태그는 내용의 의미를 명확히 설명한다.

 

HTML5에서 새롭게 추가된 시맨틱 태그

header - 헤더를 의미

nav - 내비게이션을 의미

aside - 사이드에 위치하는 공간을 의미

section - 본문의 여러 내용을 포함하는 공간을 의미

article - 본문의 주내용이 들어가는 공간을 의미

footer - 푸터를 의미