Semantic Web & Semantic Tag

Semantic Web & Semantic Tag에 대한 개념을 이해하고, 아래 질문에 대한 답변 찾기!

? Question

“사이트에 이미지를 넣는 방법은 두 가지가 있습니다. img 태그를 사용하는 것과 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해 보세요”

Semantic Web

Semantic Web은 의미론적인 웹이라는 뜻으로, 웹 상에 존재하는 contents와 data에 컴퓨터가 이해할 수 있는 설명을 붙임으로써 컴퓨터 스스로 정보를 처리하고 유의미한 해석을 할 수 있도록 하는 웹을 말한다. 다시 말해, 사람이 정보를 처리하고 해석하는 것과 비슷한 방식으로 컴퓨터가 작동할 수 있도록 데이터를 machine-intepretable & machine-readable하게 만드는 웹이 바로 Semantic Web이다.

• metadata : 특정 데이터에 대하여 설명하는 정보를 지닌 데이터로, 컴퓨터가 데이터를 읽고 해석할 수 있게 하는 역할을 한다.

Semantic Tag

Semantic Tag는 단순히 웹 페이지를 시각적으로 표현하기 보다는 태그 자체가 가지고 있는 의미를 개발자와 브라우저에게 동시에 전달할 수 있는 태그를 말한다.

예를 들어,
div나 span 태그는 시각적인 구분의 역할을 할 뿐
브라우저에게 아무런 의미를 전달하지 않는 non-semantic tag

header nav main등의 태그는 포함된 콘텐츠가 어떤 콘텐츠인지
브라우저가 이해할 수 있도록 의미를 전달하는 semantic tag

Semantic tag (a.k.a Semantic Element) 예시

• article
• aside
• details
• figcaption
• figure
• footer
• header
• main
• mark
• nav
• section
• summary
• time

Semantic Tag를 사용하는 이유

1. 접근성
   non-semantic tag로 브라우저를 구성한다면 시각적으로 모든 요소를 표현한다고 하더라도, 시각장애가 있거나 인터넷 환경이 안정적이지 않은 등의 이유로 직접적으로 브라우저를 볼 수 없는 사람들에게는 정보를 전달할 수 있는 방법이 없다. 반면 semantic tag는 해당 데이터가 어떠한 데이터인지 컴퓨터가 자체적으로 해석할 수 있도록 하므로, 시각적으로 볼 수 없더라도 설명이 가능하다.

2. 검색엔진 최적화(Search Engine Optimization, SEO)
   검색엔진은 검색 결과를 낼 때 웹페이지 내의 태그를 분석하고 정보를 수집한다. 이때 데이터에 대한 정보를 가지고 있는 semantic tag는 검색엔진이 페이지에 내포된 정보를 더 쉽게 식별하고 해석할 수 있도록 도와준다. 그 결과, semantic tag를 적절하게 활용한 웹페이지는 검색 결과에서 상위에 노출된다.

마무리하며

? Question

“사이트에 이미지를 넣는 방법은 두 가지가 있습니다. img 태그를 사용하는 것과 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해 보세요”

?Answer

img 태그는 semantic tag로써 개발자 & 브라우저가 해당 부분에 이미지가 들어간다는 것을 알 수 있도록 하는 태그이다. 반면, div와 같은 non-semantic tag에 background-image 속성을 부여하게 되면, 시각적으로는 img 태그와 같은 효과를 나게 할 수 있으나 브라우저로 하여금 해당 부분에 이미지가 들어가 있다는 것을 알도록 하기가 어렵다.

그러므로 이미지가 웹페이지 콘텐츠의 중요한 부분을 차지하는 경우에는 img 태그를 활용하고, 이미지가 미적인 부분을 주로 담당하는 경우에는 태그에 background-image 속성을 부여하여 사용하면 좋다.