알고보면 간단한 시맨틱 웹과 시맨틱 태그 한번에 이해하기 👻
웹 기술의 발전에 따라 많은 수 많은 정보들이 웹상에 쌓이게 되었는데, 컴퓨터가 그 정보들을 보다 쉽게, 의미있는 해석할 수 있도록하기 위해 시맨틱 웹(Semantic Web)과 시맨틱 태그(Semantic Tag)라는 웹 개념이 등장했다.
예를들어, 헤더의 위치를 잡아주기 위해 <div> 헤더자리 </div>
라고 적었다고 생각해보자. <div>
태그 안에 '헤더자리'라는 내용을 넣어주었기 때문에 '컴퓨터 사용자'는 이 자리가 헤더자리임을 알 수 있지만, 컴퓨터는 <div>
태그만으로 이 자리가 헤더자리임을 알 수가 없다. 물론, <div>
태그 안에 id
값을 header
로 부여하여<div id="header"> 헤더자리 </div>
이렇게 나타낼 수도 있다. 그러나id
값을 부여하기위해서는 의미없는 div
태그를 무조건 사용해줘야 한다.
이러한 문제를 개선하고자, HTML5에서는 시맨틱 웹의 개념과 시맨틱웹을 쉽게 구성할 수 있도록 만들어주는 시맨틱 태그가 등장했다. (시맨틱 태그에는 header
, nav
, article
, section
,aside
, footer
,main
등 과 같은 태그들이 존재한다.)
따라서, 시맨틱 웹 환경이 구축된 HTML5를 사용하는 현재는 컴퓨터에게 헤더자리임을 알려주기위해서 header
태그를 사용하여<header>헤더자리</header>
라고 간단하게 적어주면 된다.👍🏻👍🏻
(이미지 출처 - https://eunsukim.me/posts/understanding-semantic-html)
무조건 시맨틱 태그를 사용하는 좋은 것은 아니며, 이는 상황에 맞게 사용해 주면된다.
예시로 웹 페이지에 배경 이미지를 삽입할때, 시맨틱 태그를 사용하는 것과 사용하지 않는 것의 차이점을 알아보자.
img
시맨틱 태그를 사용하는 경우, <img class="클래스명" alt="이미지 속성" src="이미지 주소">
alt
속성에 해당 이미지에 대한 속성값을 넣을 수 있고 이는 검색엔진에서 인식된다. 따라서, 이미지가 검색엔진에 노출되기 원하면 img
시맨틱 태그를 사용해 주면 된다..클래스명 { background-image: url("이미지 주소"); }