들어가기에 앞서

Semantic
형용사
1. 언어 [주로 명사 앞에 씀]
의미의, 의미론적인

그렇다면 해석 그대로 Semantic Web은 "의미있는 웹", Semantic Tags는 "의미있는 태그들"이다.

이게 html/ css 개발언어에서 무엇을 의미할까?

Semantic Web 이란?

semantic web이란 의미있는 웹
즉, 기계(컴퓨터)에게 의미있는(이해할 수 있는) 형태로 이루어진 web을 의미한다.

등장배경

나날이 수 없이 많은 정보들이 기하급수적으로 증가중이다.
컴퓨터가 그러한 정보들을 해석하고 가공하지 못하면 그 몫은 사용자에게 돌아간다.
이것을 막기 위해 컴퓨터가 정보들을 스스로 읽고 처리할 수 있는 웹을 개발하고자 탄생한 것이 Semantic Web이다.

그렇다면 Semantic Tags란?

기계(브라우저, 검색엔진)뿐만 아니라 사용자에게 가지고 있는 컨텐츠의 의미를 알 수 있는 Tag들에 해당한다.

Non-Semantic Tag와 Semantic Tag 비교하기

_non-semantic : div, span등의 태그는 존재 자체만으론 무슨의미인지 짐작하기 어렵다.
_semantic : form, table, img 등 content의 의미를 명확하게 설명하고 있는것을 볼 수 있다.

Semantic Tags의 실제 활용 사례

html에서 이미지를 불러올 수 있는 방법은 2가지가 있다.
1. index파일에서 img태그 활용하기
2. css파일에서 div background-image활용하기

1. index파일에서 img태그 활용하기

ex) <img src="image_file.png" alt="this is example">

alt속성에 불러올 파일의 부가정보(meta data)를 저장할 수 있다.
따라서, 최적검색엔진에 노출이 가능하다.

2. css파일에서 div background-image활용하기

ex) <div class="example"></div>

     example {
  
  background-image: url("https://this_is_example.png");
}

backgorund-image는 단순히 이미지 첨부일 뿐 어떠한 의미를 담지 않는다.

최종정리

내 이미지가 사용자에 의해 검색 노출당하길 원한다면 1번의 방법 사용

단순히 이미지를 장식용으로 사용하길 원한다면 2번의 방법 사용