Semantic Web 과 Semantic Tag (div background img 와 <img>태그의 차이)

성종호·2021년 11월 1일
2

Semantic Web

검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데 이때 시맨틱 요소(Semantic element)를 해석하게 된다.

HTML으로 작성된 문서는 컴퓨터가 해석할 수 있는 메타데이터(데이터를 설명하는 데이터)와 사람이 사용하는 자연어 문장이 뒤섞여 있다.

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

non-semantic 요소
< div > 레이아웃의 전체적인 틀을 잡아주며 여러 html요소를 묶어주는데 주로 사용

semantic 요소
< h >제목을 식별하는 데 사용되는 HTML 요소

예를들어 글씨크기도 똑같고 글자수도 똑같은 아래 2개가 있다고 가정해봤을때 오늘 날씨를 검색해 보면

< div > 오늘 날씨</ div >
< h1 >오늘 날씨< /h1 >

여러 요소를 묶는데 사용하는 div에 의미없이 사용된 오늘날씨와
h1 요소 내의 콘텐츠가 제목임을 인식한 컴퓨터는 검색엔진에서 검색했을때 아래의 h1이 더 상단에 나타날 것이다.

< div > 태그내의 background-img와 < img >태그의 차이도 비슷한 맥락이다.

< img >(semantic 요소)
< img > 요소내의 콘텐츠가 이미지임을 인식 alt 태그를 통해 이미지를 설명할수있음
< div >그저 순수하게 디자인적인 배경을 꾸며주는데 사용하며 페이지 프린트시 배경이미지가 출력되지 않는다.

profile
아자

0개의 댓글