Semantic Web이란

컴퓨터가 사람을 대신하여 정보를 읽고, 이해하고 가공하여 새로운 정보를 만들어 낼 수 있도록 이해하기 쉬운 의미를 가진 차세대 지능형 웹. 1998년 월드 와이드 웹의 창시자인 팀 버너스 리(Tim Berners Lee)에 의해 개발, 기계가 읽고 처리할 수 있는 웹이라고 정의하였다. 컴퓨터가 정보를 제공하기 위해 자체적으로 웹상의 정보를 탐색 및 수집하여 논리적으로 추론하는 정보처리 기능을 하고 있다. 인터넷 정보를 의미망으로 통합한 온톨로지(ontology) 형태로 이루어지며, 정보를 이해하고 다양한 정보 간 의미요소를 연결함으로서 지능적 판단에 따라 추출, 가공하는 처리방식을 말한다. 이를 위해 컴퓨터가 인식할 수 있는 언어를 이용해 웹페이지의 정보를 나타내는 방식이 적용되었는데, 시맨틱 마크업 언어로는 XML,RDF등의 언어기술이 표준화되어 있다.

위키에서는 이렇게 길고 거창하게 쓰여져있지만 여러 곳에서 검색하여 내가 이해한 것은 컴퓨터도 읽고 이해할 수 있는 웹

컴퓨터가 받은 정보를 분석하여 의미론적인 자료들을 직접 찾아서 웹에 표출 시켜주는 거라고 볼 수 있다.

예시를 하나 들면

<font size="10"><strong>Nice!!</strong></font>

<h1>Nice!!</h1>

이런 식으로 코드는 다르지만

크기 굵기가 거의 비슷하게 나오게 할 수 있다.

이것을 우리가 보면 똑같다고 느끼지만

컴퓨터는 이것을 보는 것이 아니라 정보를 분석하고 읽는 것만
하기 때문에 이 두개는 글자는 컴퓨터 기준에서는
완전 다른 글자라고 볼 수 있다.

가장 큰 차이점은 폰트 사이즈로 조정한 값을 컴퓨터는

<font size="10"><strong>Nice!!</strong></font>

💻 (아... 그냥 글씨를 크고 굵게 했나 보구나)

이런식으로 생각하고 넘기지만

<h1>Nice!!</h1>

태그 h1이 들어가 있는 단어는

💻(어? h1태그를 사용했네!)

💻(h1 태그는 분명.. 아 맞다!
      제목중에 가장 크게 보이는 제목을
      쓸 때 사용하는 태그였지!!)

라고 정보를 분석하여 웹을 검색할 때 더 중요한 문장이라고 판단하여

nice라는 단어를 웹 엔진에 검색하였을 때 더 상위에 노출되거나

썸네일 글자에 자동으로 첨부해준다!!

덧붙이자면 이러한 것을 더 효율적이게 하기 위해 나온 것이 Semantic Tag이다

Semantic Tag이란

시맨틱 웹에서 사람과 기계가 이해할 수 있는 형태, 즉 활용하기 좋은 형태의 데이터로 웹을 발전시키기 위해 나온 tag 입니다.
조금 더 쉽게 말하자면 HTML5 언어에 익숙하지 않는 사람이 보고도 저 태그가 무엇을 의미하는지 알아볼 수 있도록 하는 태그를 Semantic Tag라고 합니다.

설명을 보자면 이제 더 나가서 기계만 잘 이해하고 분석하는 것이 아니라
코드를 처음 보는 사람도 알 수 있게 하기 위해 나온 것이다.

<div id="header"></div>

Semantic Web이 없던 시절에는 이런식으로 아이디 값을 직접 입력하여
태그를 사용하였지만

<header></header>

Semantic Tag가 생기고 나서 이렇게 처음 보는 사람도

대충 위쪽에 있다는 느낌을 받을 수 있게 고안된 것이다.

HTML5에서 추가된 시맨틱 태그는 아래와 같다.

header : 헤더를 의미
nav : 네비게이션을 의미
aside : 사이드에 위치하는 공간을 의미
section : 본문의 여러 내용 (article)을 포함하는 공간을 의미
article : 본문의 주 내용이 들어가는 공간을 의미
footer : 푸터를 의미

Semantic Tag는 이처럼 딱 봐도 직관성이 뛰어나서 편리하게 쓰이고 있다.

추가적으로

태그를 사용하는 것과
태그에 background-image 속성을 추가하는 것.

이 두가지의 차이점을 알아보았다.

이 둘도 겉보기에는 비슷해보여서 아무거나 써도 된다고 생각이든다.

하지만

css 로만 봤을때는 그렇지만 이 해당 태그에 javascript 의 액션 이벤트를 부여 했을 때 좀 차이나 난다고 한다

img 는 마우스로 지정 할 수 있기때문에 액션을 입혀 사용하기 용이 하지만 background-image 같은 경우는 선택이 되지 않아 이벤트를 입히기에는 맞지 않는다고 한다.

또한 위에서 말했듯이

Semantic Web의 특성으로 img태그를 사용하는 것은 웹에 잘
노출되고 싶거나 의미가 있는 중요한 것일 때 사용하고

백그라운드 같은 배경이나 의미 없는 그림을 사용할 때는
background-image를 사용한다!

img
표현하려는 이미지가 실제 그 페이지의 실질적 내용 일때

background-image
표현하려는 이미지가 실제 그 페이지의 실질적 내용이 아닐 때

출처
css background-image 사용방법과 img태그와 차이점
HTML 기초 - 2 (시맨틱 태그, 메타태그)
Semantic Web, Semantic Tag 이해