알고보면 간단한 시맨틱 웹과 시맨틱 태그 한번에 이해하기 👻
1. 시맨틱 웹? 시맨틱 태그?
웹 기술의 발전에 따라 많은 수 많은 정보들이 웹상에 쌓이게 되었는데, 컴퓨터가 그 정보들을 보다 쉽게, 의미있는 해석할 수 있도록하기 위해 시맨틱 웹(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)
2. 시맨틱 태그 적용 사례
무조건 시맨틱 태그를 사용하는 좋은 것은 아니며, 이는 상황에 맞게 사용해 주면된다.
예시로 웹 페이지에 배경 이미지를 삽입할때, 시맨틱 태그를 사용하는 것과 사용하지 않는 것의 차이점을 알아보자.
img시맨틱 태그를 사용하는 경우,
<img class="클래스명" alt="이미지 속성" src="이미지 주소">
위와 같이 배경이미지를 넣어 줄 수 있으며,alt속성에 해당 이미지에 대한 속성값을 넣을 수 있고 이는 검색엔진에서 인식된다. 따라서, 이미지가 검색엔진에 노출되기 원하면img시맨틱 태그를 사용해 주면 된다.
- css파일에서 이미지 삽입하는 경우,
.클래스명 { background-image: url("이미지 주소"); }
위와 같이 css를 통해 배경이미지를 넣어주면 어떤 의미있는 값도 컴퓨터에서는 읽을 수 없기 때문에 그저 이미지 삽입에서 그치게된다. 하지만, 웹사이트에서 단순하게 보여주기를 위한 이미지라면 유지보수에 편리한 본 방법을 사용해 주면 된다.
