Semantic Web 과 Semantic Tag

html css에서 이미지를 넣는 방법은 두가지가 있다아

 

1. html에서 img태그 사용하는 방법

 

2. css에서 background-image 로 추가하는 방법

 

위 2가지 방법의 차이점은 무월 까요? 삐 삐 삐카츄유

 

여기서 우리가 알아야할 개념이 Semantic Web과 Semantic Tag라는 것이다

 

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

 

 

 

대부분의 인터넷 사용자는 원하는 정보를 취득하기 위해 Google이나 Naver와 같은 검색사이트를 이용한다. “나는 검색된다. 고로 존재한다”는 말이 있을 정도로 웹사이트는 검색엔진에의 노출이 매우 중요하다. 당연한 것이 검색엔진에 노출되지 않는 웹사이트에는 접속하는 이도 없기 때문이다. 검색엔진은 이 시대의 가장 강력한 권력 중의 하나라고 말할 수도 있겠다.

 

SEO(검색엔진 최적화: Search Engine Optimization)같은 마케팅 도구를 사용하여 검색엔진이 본인의 웹사이트를 검색하기 알맞은 구조로 웹사이트를 조정하기도 하는데, 이것은 기본적으로 검색엔진이 웹사이트 정보를 어떻게 수집하는지 아는 것으로 부터 시작된다.

검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집한다.(이것을 크롤링이라 하며 검색엔진의 크롤러가 이를 수행한다.) 그리고 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어 둔다.(이것을 인덱싱이라 하며 검색엔진의 인덱서가 이를 수행한다.)

 

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

 

HTML으로 작성된 문서는 컴퓨터가 해석할 수 있는 메타데이터와 사람이 사용하는 자연어 문장이 뒤섞여 있다. 아래 코드를 보면 1행과 2행은 브라우저에서 동일한 외형을 갖는다. 이는 h1 태그의 디폴트 스타일이 1행과 같기 때문이다.

 

 

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

<h1>Hello</h1>

 

 

- 출저 : https://poiemaweb.com/html5-semantic-web

 

이야 벌써부터 모르겠다. 좀더 구글링 해보면

 

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

 

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

 

쉽게 말해 따로 정해주지 않아도 메타 데이터가 있는 것(검색엔진 robot이 다른태그라고 인식할 수 있는)이 Semantic  요소고 

 

메타 데이터가 없는 부분은 non-Semantic 요소 이다

 

그래서 img 태그로 작성하는 것과 background-image로 작성하는것은 엄연히 다른것이다!