참조
킹포이마웹
Semantic WEB
인터넷에서 원하는 정보를 획들 할 때 구글이나 네이버와 같은 포털 사이트를 이용한다. 각 사이트는 검색엔진을 사용하고 그 검색엔진에 노출 되는게 매우 중요한데, 검색엔진에 노출되지 않으면 접속하는 이도 없기 때문이다. 스마트 스토어만 봐도 검색엔진에 등록되기 위해서 수많은 방법을 사용하지 않는가?
그럼 과연 검색엔진은 웹 사이트 정보를 어떻게 수집하는가를 아는거로 시작한다.
검색엔진은 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집한다. 그리고 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스를 만들어둔다.
인덱스를 생성할 사용되는 정보는 검색 로봇이 수집한 정보인데 결국 웹사이트의 HTML 코드이다. 즉 검색엔진은 HTML코드 만으로 의미를 인식하는데 이 때 시맨틱 요소를 해석하게 된다.
<font size="6"><b>Hello</b></font>
<h1>Hello</h1>위와 같은 코드는 외형적으로는 완전히 동일하지만, 의미적으론 완전히 다르다.
첫번째 코드는 의미적으로는 아무런 의미를 가지고 있지 않지만 두번째 코드는 header(제목) 중 최상위 레벨이라는 의미를 내포하고 있다. 개발자가 의도한 요소의 의미가 명확하고 코드의 가독성을 높이고 유지보수를 쉽게 한다.
검색엔진은 대체로 h1 요소 내의 콘텐츠를 웹문서의 중요한 제목으로 인식하고 인덱스 포함시킬 확률이 높다. 그리고 사람도 h1이 중요한 이름이라는 것을 알 수 있다. 즉, 시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.
시맨틱웹이 나타난 이유는 웹이 존재하는 수많은 웹페이지들에 메타데이터를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.
semantic과 nonsemantic요소
non-sematic 요소
div, span등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.
semantic 요소
form, table, img등이 있으며 이들 태그는 content의 의미를 명확히 설명한다.
| tag | Description |
|---|---|
| header | 헤더를 의미한다. |
| nav | 내비게이션을 의미한다. |
| aside | 사이드에 위치하는 공간을 의미한다. |
| section | 본문의 여러 내용 (article)을 포함하는 공간을 의미한다 |
| article | 본문의 주내용이 들어가는 공간을 의미한다. |
| footer | 푸터를 의미한다 |
