1. Semantic Tag와 Web

Semantic Tag와 Web은 무엇일까?

Semantic의 사전적 의미는 '의미론적'이다.
그렇다면 semantic tag는 의미를 가진 태그라고 생각해볼 수 있다. 그리고 semantic tag를 적절히 사용한 웹페이지를 semantic web이라 한다.

h1 태그와 p 태그를 예를 들어 살펴보자.
h1 태그는 heading을 줄인 말로 머리말 또는 제목을 뜻한다.
p 태그는 paragraph의 줄임말로 문단을 넣을 때 p 태그를 사용한다.
즉, 우리는 처음 보는 웹페이지이더라도 그 태그의 목적을 파악할 수 있다. 이러한 태그들을 semantic tag라고 부른다.

물론 semantic tag를 사용하지 않아도 css를 적용하여 똑같은 웹페이지를 구현할 수 있다. 하지만 W3C(World Wide Web Consortium, 웹 국제표준기관)에서는 semantic tag 사용을 권장한다.

왜 semantic tag를 사용해야 할까?

웹은 나 혼자만 사용하는 것이 아니다. 최소 2대의 컴퓨터가 서버와 클라이언트라는 관계 안에서 상호작용으로 이루어지는 것이다. 각각의 목적과 역할이 명확한 semantic 태그를 사용한다면 우리의 컴퓨터는 html 구조를 원활하게 파악할 수 있다. 그리고 이는 인터넷 검색을 할 때 유용할 것이다.

예를 들어, 맛집 정보를 제공하는 웹사이트가 있다고 해보자. 모든 텍스트를 h1 태그로만 작성한다면 어느 것이 실제 제목인지, 무슨 텍스트가 더 중요한지 파악하기 어렵다. h1 태그를 그 목적에 맞게 맛집 이름에만 사용한다면, 다른 인터넷 유저가 그 이름을 검색했을 때 검색 엔진은 h1 태그에 우선 순위를 둘 것이다. 이는 검색했을 때 상위에 표시될 가능성을 높여준다.

2. img 태그와 div(background-img 속성 포함) 태그의 차이점

Semantic 태그를 잘 이해했다면, img 태그와 background-img 속성을 사용한 div 태그의 차이점이 보일 것이다.

img 태그에 대해 컴퓨터는 이 태그가 이미지를 가지고 있다고 이해한다. img 태그의 목적과 역할이 이미지 파일을 불러오는 것이기 때문이다. 반면, div 태그의 본 역할은 레이아웃을 위함이기에, 컴퓨터는 이 태그가 이미지를 가지고 있는지 파악할 수 없다.

따라서, 검색 노출이 많아야 하는 이미지 파일이라면 img 태그를 사용하는 것이 좋다. 단순 디자인 목적의 배경화면을 위함이라면 div의 background-img 속성을 사용해도 무관하다.