본문 바로가기

개인공부 기록/HTML&CSS

Semantic Web 과 Semantic tag

 

Semantic의 사전적 정의 : 의미의, 의미론적인

 

Semantic Web과 Semantic Tag란?

Semantic Web 

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

Semaatic Tag

시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹을 실현할 수 있으며 태그가 의미를 가짐으로써 검색엔진의 크롤링에게 사이트에 대한 정보를 비교적 정확히 제공할 수 있게 된다.

Semantic Tag를 이용한 구성

 

웹페이지 데이터에 이름(인식)표를 붙여주어 컴퓨터가 쉽게 이해하고, 분류하여 정보를 제공할 수 있도록 만든다.

 

semantic, non-semantic 요소

semantic 요소의 예: <table>, <img>

non-semantic 요소의 예: <div>

 

이미지 삽입 시 img태그와 div태그의 background-iamge속성 중 어떤 방식을 사용해야 할까?

이미지 삽입시 img 태그와 div태그의 css속성을 이용하는 두 가지 방법이 있는데 목적에 따라 다른 방법을 사용한다.

 <img> 태그 - 의미있는 이미지 정보를 보여주고자 하거나, 검색엔진에 이미지가 표출되기를 원하는 경우에 사용

<div> 태그 - 단순 배경에 이미지를 보여주고자 하는 경우에 사용

 

단순 이미지 표출뿐만 아니라, 로딩 실패 시 alt속성을 이용한 이미지 의미 정보 파악, 효율성, 유지 보수성 등 여러 방면에서 Semantic 요소를 사용하는 것이 이점이 많기 때문에 사용을 지향해야 한다.

 

 

 

 

참고 자료

 

 

Semantic Web | PoiemaWeb

검색엔진은 대체로 h1 요소 내의 콘텐츠를 웹문서의 중요한 제목으로 인식하고 인덱스에 포함시킬 확률이 높다. 또한 사람도 h1 요소 내의 콘텐츠가 제목임을 인식할 수 있다. 시맨틱 요소로 구

poiemaweb.com

 

 

TIL 09 | 시맨틱 웹 Semantic Web, 시맨틱 태그 Semantic Tags

시맨틱 웹 (Semantic Web) 시맨틱 태그 (Semantic Tag) 시맨틱 웹 (Semantic Web) 의미 시맨틱 웹은 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹

3d-yeju.tistory.com

 

Recent Posts
Popular Posts
Recent Comments