[HTML/CSS]Semantic Web과 Semantic Tag 이해하기

Semantic Web(a.k.a Web 3.0)이란??

W3C(World Wide Web Consortium)에서 제정한 World Wide Web의 확장판.

Semantic Web의 목적은 웹의 각종 정보들에 의미를 가지게 하기 위함이다. 여기서 의미를 가진다라고 함은 메타데이터(metadata)^[각주:1]를 뜻한다. 메타데이터가 되기 위해서는 semantic tag가 필요하다. 

 

Semantic Tag란?

검색 엔진에 노출되기 위해서는 검색 키워드에 대응하는 인덱스가 존재해야하는데, 이러한 인덱스를 수집하는 기준이 바로 HTML의 semantic tag들이다.

HTML의 수많은 tag들중, img, header, main, body, footer 등이 바로 semantic tag들이다.

 

사이트에 이미지를 넣는 두 가지 방법

<img> VS <div> + background-image^[각주:2]

두 가지 방법 모두 화면에 이미지를 구현한다는 점에서는 동일하지만, semantic 관점에서 차이가 있다. 

<img> 태그 - 의미를 가지고 있는 사진

<img alt="HTML" height="280" width="180" src="https://XXX">

1. 회사 로고, 인물 프로필 사진 등 콘텐츠 정보와 연관이 있는 이미지를 쓸 때 (alt 속성 함께 사용)

2. 경고 아이콘과 같이 중요한 의미가 내포된 이미지를 쓸 때 (마찬가지로 alt 속성 함께 사용)

3. 페이지 프린트시 이미지가 함께 나오도록 할 때

<div> 태그 + background-image 속성을 쓸 때 - "의미가 없어도 되는 사진"

// html
<div class="bg-img">배경이미지</div>

// CSS
.bg-img {
  /* background-color: yellow; */
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
  height: 300px;
  width: 300px;
  background-size: 100%;
}

1. 이미지가 콘텐츠의 일부가 아닐 때

2. 이미지 스프라이트를 이용할 때

3. 말그대로 웹문서의 배경을 채우기 위한 용도일 때

4. 페이지 프린트시 이미지가 나오지 않게 할 때

 

 

1. 메타데이터(metadata)는 데이터(data)에 대한 데이터이다. 이렇게 흔히들 간단히 정의하지만 엄격하게는, Karen Coyle에 의하면 "어떤 목적을 가지고 만들어진 데이터(Constructed data with a purpose)"라고도 정의한다.(wikipedia) [본문으로]
2. 불타는 키보드 [본문으로]