◆ 시맨틱(Semantic)이란?

프로그래밍에서 시맨틱(Semantic)이란 코드 조각의 의미를 나타낸다.
이 코드는 화면에서 어떻게 보여질까?가 아닌 이 코드의 의미, 즉 역할은 무엇이며 기능은 무엇인가를 나타내는 것이다.

참고 : https://developer.mozilla.org/ko/docs/Glossary/Semantics

예를 들어 집갑에 돈을 집어넣는 함수를 만든다고 하자.
함수명을 단순히 A('10000')로 만들게 되면 아무 의미도 가지지 않는 함수 처럼 보일수 있다.
하지만 inputWallet('10000')처럼 의미적 가치를 지닌 시맨틱 네이밍을 하게 되면 A('10000') 보다는 정확한 기능파악이 가능해진다.

◆ 시맨틱 웹(Semantic Web)과 시맨틱 태그(Semantic Tag)란?

시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다. 웹의 창시자인 팀 버너스리가 1998년 제안했고 현재 W3C에 의해 표준화 작업이 진행 중이다.

출처 : https://ko.wikipedia.org/wiki/%EC%8B%9C%EB%A7%A8%ED%8B%B1_%EC%9B%B9

위키피디아에서 검색한 시맨틱 웹의 정의이다.
말이 어렵지만 앞서 작성한 시맨틱의 내용과 흡사하다.
컴퓨터가 정보를 쉽게 수집할수 있도록(혹은 이해할수 있도록) 만든 의미적인 태그들(Semantic Tag)로 구성된 웹사이트 정도로 이해하면 편할듯 하다.
즉,
<div class="header">헤더입니다.
보다
<Header>헤더입니다.</Header>
로 시맨틱 태그들을 사용하는게 시맨틱 웹을 구성하는데 도움이 된다.

다른 예로 <img> 태그와 CSS의 background-image를 넣는것은 시맨틱 웹을 구성하는데 있어 큰 차이가 있다.

img의 속성인 alt에다가 정보를 입려하게 되면 메타정보로 인식되어 검색엔진에서 수집이 가능하지만 background-image는 아무의미 없는 사진 한장이 되어 버린다.

큰 차이가 있지만 어느것이 옳다고는 할수 없다.
왜냐하면, 내가 올린 사진이 혹은 정보가 검색엔진에 의해 수집이 되어 검색노출이 되어야 한다면 <img>의 alt속성을 사용하는 것이 맞지만 단순희 아무의미 없는 사이트를 꾸미는 용도의 사진파일일 뿐이라면 background-image를 사용하여도 무방하다.