[HTML5] 2 Semantic Web? 소개-IMBETPY


개요

Semantic Web 의 개념과 Semantic 요소를 정리했습니다.


🪁 Semantic Web 이란?

시맨틱웹(Semantic Web) 이란 웹에 존재하는 페이지들에 메타데이터를 부여하여, 전에는 잡다하게 늘어졌던 정보들에 의미 와 관련성을 갖게하는 개념이다.

  • 검색엔진은 로봇(Robot) 프로그램을 이용해 매일 웹사이트 정보를 수집한다. 이를 크롤링이라고 하며 크롤러가 수행한다.

  • 유저가 검색할 키워드를 예측하여 키워드에 대응하는 인덱스를 만들어 놓는다. 이를 인뎅싱이라 하며 검색엔진 인덱서가 수행한다.

  • 인덱싱을 할 때 사용되는 정보는 HTML 코드에서 나오는 것이다. 때문에 HTML 코드에서 페이지의 의미를 드러내야 하는데, 이를 위해 사용하는 것이 시멘틱요소 이다.

  • 예를들어 HTMl 에서 요소를 통해 제목, 링크 등 데이터가 가지는 의미가 무엇인지 태그를 통해서 드러내며, 이를통해 시멘틱 웹이 구현된다.

🎳 semantic & non-semantic 요소

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

① semantic 요소

form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다,

② non-semantic 요소

div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.

③ HTML5에서 등장한 시맨틱태그

  • header : 헤더를 의미한다

  • nav : 내비게이션을 의미한다

  • aside : 사이드에 위치하는 공간을 의미한다

  • section : 본문의 여러 내용(article)을 포함하는 공간을 의미한다

  • article : 분문의 주내용이 들어가는 공간을 의미한다

  • footer : 푸터를 의미한다



참고📚

mozilla poiemaweb