Semantic Web

시맨틱 웹이란 "의미론적인 웹"이라는 뜻으로 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 의미정보를 해석할 수 있는 프레임워크이자 기술이다.

즉, 정보를 사람 뿐만 아니라 기계가 의미(Semantic)를 파악하고 사용자의 요구에 적합한 결과를 서비스 가능하도록 하는 것이다.

Semantic Tag

시맨틱 태그란 의미가 있는 요소를 말한다.
시맨틱 요소는 개발자과 브라우저 모두에게 존재 의미를 명확하게 설명한다.

<div>,<span>의 경우는 그 태그 안에 뭐가 들어있는지 명확한 설명이 되지 않는 반면에 <table>,<header>는 명확하게 설명이 된다.

시맨틱 요소로 구성되어 있는 웹페이지는 검색엔진에 보다 의미론적으로 문서 정보를 전달할 수 있고 검색엔진 또한 시맨틱 요소를 이용하여 보다 효과적인 크롤링과 인덱싱이 가능해졌다. 즉, 시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다. 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.

시맨틱 태그의 종류에는

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
<form>
<img>
...

등이 있다

예들들어
내가 만약 박스를 만들고 그 안을 게시물이나 포스트 내용으로 채우고 싶다면
의미없는 div 태그로 채우는 방법보다

<div>
    <div>something</div>
    <div>somebody</div>
</div>

아래와 같이
문서의 섹션을 정의하는 session과 독립적인 콘텐츠 내용을 지정하는 article 태그로 명확한 의미 전달을 하는것이 좋다.

<session>
    <article>something</article>
    <article>somebody</article>
</session>

문제

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

👉🏽 <img>태그는 Semantic Tag이다. 태그자체가 의미를 품고 있기 때문에 이 태그가 어떤 의미인지,어떤 역할인지 유추 가능하다. 반면에<div>는 Non-Semantic Tag로 박스 태그라는것만 유추 가능하고 이 안에 무엇이 들어갈지 의미 전달이 안된다.

사진을 넣는것만이 목적이라면 물론 div태그에도 background-image 속성을 넣어서 사진을 삽입하는건 가능하다.하지만 그렇게되면 검색엔진이 html 파일을 분석할 때 정확하게 컨텐츠를 식별하기가 힘들고 컴퓨터가 의미를 이해하지 못하여 Google에서 크롤링하거나 색인을 생성하지 않는 문제가 생긴다. 그러한 문제를 제외하고라도 Semantic적인 코드와 페이지를 위해 Semantic Tag를 이용하는 것이 좋겠다.