TIL2 - Semantic(시멘틱) Web & Tag

HTML 학습을 하다보면 많이 본 단어가 있을 것이다. 바로 Semantic이다. Semantic이란 무엇일까? 사전적인 의미를 찾아보면 '의미론적인'이라는 뜻이다.

사전적인 의미에서도 알 수 있듯이 Semantic은 의미가 있는 것들을 말한다. 쉽게 말해서 '시각적으로 어떻게 보여질까?'가 아니라 '내가 쓰고 있는 HTML 태그는 어떤 목적을 가지고 있을까?'의 문제인 것이다.

Semantic 마크업의 이점

• 검색 엔진에 영향을 줄 수 있기 때문에 검색을 할 시 노출이 된다.
• 만약 시각 장애가 있는 사용자가 Semantic 마크업 한 사이트를 이용한다면 스크린 리더와 같이 문서를 소리로 바꿔주는 특수한 장치를 이용하여 웹에 비교적 쉽게 접근할 수 있을 것이다.

Semantic Tag(시멘틱 태그)

<img>, <h1> ~ <h6>, <main>, <section> 등과 같이 특정한 역할과 목적을 가지고 있는 태그들이다.

<img class="js-image" alt="js" src="https://www.w3schools.com/whatis/img_js.png">

.js-image {
  width: 300px;
}

<img> 로 이미지를 나타낸다면 '이것은 어떤 정보를 가지고 있는 이미지구나!'라고 브라우저가 알 수 있을 것이다.

똑같은 이미지를 보여주기 위해서 div를 사용해서 코드를 작성한다면 어떨까?

<div class="bg-img"></div>

.bg-img {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
  height: 300px;
  width: 300px;
  background-size: 100%;
}

<div>을 사용하여 <img>태그를 사용한 결과와 같이 이미지를 똑같이 보여지게 할 수도 있을 것이다. 하지만 이렇게 한다면 아무 의미도 없이 단순히 보여지기만 할 뿐이다.

Semantic Web(시멘틱 웹)

Semantic Tag를 사용하여 만든 웹 사이트가 바로 Semantic Web이다. 이 웹은 요소 하나하나마다 정보가 담겨 있어서 정보 수집을 통해 해당 웹에 대한 접근을 쉽게 할 수 있다.