[HTML 5] 시맨틱 웹

본 게시물은 poiemaweb(https://poiemaweb.com/)에 기술된 내용을 기반으로 작성한 게시물입니다.

 

1. 시맨틱 웹(Semantic Web)

 - 웹에 존재하는 웹페이지들에 메타데이터를 부여, 기존의 데이터 집합이었던 웹페이지에 '의미', '관련성'을 더해 거대한 데이터베이스로 구축하고자 하는 발상

 

1.1. 검색 엔진

 - 크롤러 : 크롤링 수행 (로봇이라는 프로그램을 통해 매일 전세계 웹사이트의 정보 수집)

 - 인덱서 : 인덱싱 수행 (검색될 만한 키워드를 미리 예상, 검색 키워드에 대응하는 인덱스(색인) 생성)

 - 로봇은 HTML 코드 정보를 수집하고, HTML 코드만으로 그 의미를 인지한다.

    - 이 때 시맨틱 요소를 해석

 

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

 - 위 두줄의 코드는 브라우저 상에서 동일한 결과를 출력

 - Line 1 : 글씨 크기가 6이며 bold인 Hello 출력

 - Line 2 : 제목(header) 중 가장 상위 레벨의 태그에 속한 Hello 출력

    => 둘째줄의 코드가 개발자의 의도를 보다 정확히 내포하고 있음

 

 - 검색 엔진은 h1 요소 내의 콘텐츠를 웹문서의 중요한 제목으로 인식, 색인할 확률이 높음

 

1.2. HTML 요소

1-2-1. non-semantic 요소

 - div, span 등이 있으며 해당 태그는 content에 대해 어떤 설명도 하지 않음

 

1-2-2. semantic 요소

 - form, table, img 등이 있으며 해당 태그는 content의 의미를 명확히 설명

1.3. HTML5에 추가된 시맨틱 태그

 - header : 헤더를 의미

 - nav : 네비게이션을 의미

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

 - section : 본문의 여러 내용(article)을 내포하는 공간을 의미

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

 - footer : 푸터를 의미

 

---

확인하기

1. 검색엔진이 정보를 수집하는 과정?

2. non-semantic, semantic 요소의 예

3. HTML5에서 새로이 추가된 semantic 태그

---

REFERENCES

- poiemaweb

  - 시맨틱 웹