Semantic Web과 Semantic Tag

1. Semantic Web

기존의 웹

기존의 웹에서는 데이터를 검색할때 키워드 검색을 통한 접근이 이루어진다.

이러한 방식은 불필요한 정보 발생을 야기하며 컴퓨터가 필요한 정보를 추출, 해석할 방법이 없어 사용자가 직접 개입해야되는 문제가 있다.

 

Semantic Web

컴퓨터가 정보, 리소스, 정보-리소스 관계등을 이해할 수 있도록 이들을 표현함으써 컴퓨터가 정보자원처리, 데이터통합 및 재사용을 스스로 수행할 수 있도록한다.

 

2. Semantic Tag

developer 뿐만아니라 browser도 해당 HTML element의 의미를 이해할 수 있는 tag.

 

<div>태그는  HTML 문서 내에서 한 개의 Block을 만드는 태그로 <div class="header"> 와 같이 레이아웃을 짜거나 구조를 만들때 주로 사용된다. 하지만 이런 태그는  browser에게 해당 태그의 컨텐츠에 대해 아무런 정보를 주지 못한다. 따라서 <header> 태그를 사용함으로써 해당태그의 문서의 header임을 비로서  browser가 이해할 수 있도록 해야한다.

 

semantic tag 종류

출처 : https://www.w3schools.com/html/html5_semantic_elements.asp

 

 

3. HTML <img>  vs   CSS background-image property

 

두 방법 모두 웹문서에 이미지를 추가하는 방법으로 웹페이지상에 보여지는 결과는 같다.

하지만, <img> 태그는 content가 이미지임을 의미하고 background-image property는 태그가 아니기 때문에 content에 대한 아무런 정보를 제공하지 않는다.

이러한 차이에 기반하여 두 방식을 사용하는 상황을 다음과 같이 나눌수 있다

 

<img>

<img alt="HTML" src="https://www.w3schools.com/whatis/img_js.png">

1. 이미지가 단순 그림이 아니라 전체 내용과 관련될 때

2. 검색엔진에 의해 참조되어질 필요가 있을 때

3. alt, title과 같은 속성을 사용하여 추가 정보를 제공할 때

 

background-image property

.bg-img {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
}

1. 첨부하려는 이미지가 디자인등을 위한 단순 그림일 때

2. 아이콘과 같은 반복되는 이미지를 추가할 때