Html5-sematicWeb


정의

검색 엔진이라는 것은 매우 중요하다. 웹사이트가 검색엔진에 노출이 되지 않는다면
접속자도 없어지기 때문이다.
SEO같은 마케팅 도구를 사용하여 본인의 웹사이트를 검색하기 알맞은 구조로
웹사이트를 조정하기도 하는데 이는 기본적으로 검색엔진이 웹사이트 정보를 어떻게 수집하는지
아는 것으로 부터 시작된다.
검색엔진은 로봇이라는 프로그램을 이용해서 매일 전세계의 웹사이트 정보를 수집한다
이것을 크롤링이라하면 검색엔진의 크롤러가 이를 수행한다. 그리고 검색 사이트 이용자가
검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어 둔다.
(이것을 인덱싱이라 하며 검색엔진의 인덱서가 이를 수행한다.)
인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 결국 웹사이트의 HTML 코드이다
즉 검색엔진은 HTML 코드만으로 그 의미를 인지하여야 하는데 이 때 시맨틱 요소를 해석하게 된다.
HTML로 작성된 문서는 컴퓨터가 해석할 수 있는 메타데이터와 사람이 사용하는 자연어 문장이 뒤섞여 있다.
아래 코드를 보면 1행 2행은 브라우저에서 동일한 외형을 갖는다. 이는 h1 태그의 디폴트 스타일이 1행과 같기 때문이다.

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

즉 1행의 요소는 의미론 적으로 어떤 의미도 없다. 개발자가 의도한 요소의 의미를 명확히 나타내지 않았고
단순히 폰트크기와 볼드체를 지정하는 메타데이터만을 브라우저에게 알리고 있다.
그러나 2행은 h1이라는 제목중 가장 상위 레벨이라는 의미를 내포하고 있어서 개발자가 의도한
요소의 의미가 명확히 드러나고 있다 이것은 코드의 가독성을 높이고 유지보수를 쉽게한다.

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

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

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

header는 헤더를의미
nav는 네비게이션을 의미
aside는 사이드에 위치하는 공간을 의미
section은 본문의 여러내용을 포함하는 공간을 의미
article은 본문의 주내용이 들어가는 공간을 의미
footer는 footer를 의미한다.