시맨틱 웹(Semantic Web)

JwithYOU·2022년 2월 21일
0

HTML5

목록 보기
2/2

오늘 기록하는 내용은 poiemaweb.com을 기반으로 합니다

시맨틱 웹(Semantic Web)

오늘날 검색사이트는 우리 삶에서 없어서는 안될 정도로 인류의 삶에 많은 영향을 끼칩니다
검색사이트들은 검색엔진을 이용해서 많은 양의 정보를 수집합니다(이걸 크롤링이라 하고 검색엔진의 크롤러가 이를 수행합니다.) 그리고 이용자가 검색할 만한 키워드를 미리 예샹하여 검색 키워드에 대응하는 인덱스(색인)을 만들어 놓습니다.(이걸 인덱싱이라 하고 검색엔진의 인덱서가 수행합니다.)

인덱스를 생설할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 결국 웹사이트 HTM 코드입니다.
검색 엔진은 HTML 코드 만으로 의미를 인지해야 하는데 이때 시맨틱 요소(Semantic element)를 해석하게 됩니다.

HTML으로 작성된 문서는 컴퓨터가 해석하는 메타데이터와 사람이 사용하는 언어로 섞여져 있습니다

<font size="6"><b>Good morning</b></font>
<h1>Good morning</h1>

위 예시를 브라우저 화면 띄우면 동일한 크기의 글씨 크기를 확인할 수 있습니다.
하지만 웹상에서 바라보면 이 둘은 전혀 다른 의미를 가지고 있습니다.
1행은 그저 폰트 사이즈 조절한 값을 브라우저에게 알리지만 2행의 요소는 header(제목) 중 가장 상위 레베이라는 의미를 내포하고 있어 다른 개발자에게 의미를 전달할 수 있고 코드의 가독성을 높이고 유지보수를 쉽게할 수 있도록 해줍니다.

h1 요소는 검색엔진과 사람에게 요소 내에 있는 컨텐츠가 중요하다는 사실을 동시에 전달해줍니다.
시맨틱 요소로 구성되어 있는 웹페이지는 검색엔진에 의미론적으로 문서 정보를 전달할 수 있고
검색엔진 또한 시맨틱 요소를 이용하여 보다 효과적인 크롤링과 인덱싱이 가능해졌습니다.
즉, 시맨틱 태그는 브라우저, 검색엔진, 개발자 이 모두에게 컨텐츠의 의미를 명확히 설명하는 역할을 합니다

시맨틱 태그로 인해서 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석해서 데이터를 활용할 수 있는 시맨틱 웹이 실현 되었습니다.
시맨틱 웹이란 기존의 잡다한 데이터 집합이었던 웹페이지를 의미와 관련성을 가지는 거대한 데이터베이스로 구성 된 것입니다.

HTML 요소는 non-semantic(논 시맨틱) 요소와 semantic(시맨틱) 요소로 구분할 수 있는데

non-semantic 요소
div, span등이 있으며 이들 태그는 컨텐츠에 어떠한 설명도 하지 않습니다

semantic 요소
form, table, img 등이 있으며 이들 태그는 컨텐츠의 의미를 명확히 설명해줍니다.

profile
개발자가 되기 위한 코린이의 여정

0개의 댓글