TIL01, HTML: Semantic Tag & Semantic Web*

Semantic Tag? Semantic Web?

시맨틱 태그는 그 자체로 의미를 가지는 태그를 의미하고 논시맨틱 태그는 그렇지 않은 태그를 의미한다. 시맨택 태그의 예로는 <header>, <img>, <footer>, <section> 등이 있고, 논시맨틱 태그의 예로는 <div>, <span> 이 있다. 이러한 시맨틱 태그를 사용하여 구성된 웹을 시맨틱 웹이라고 한다.

Pros / Cons

사실 두가지 종류의 태그는 기능적으로는 전혀 차이가 없다. 웹페이지의 각 부분마다 <header>, <main>, <footer>로 작성을 하는 것이나 모든 부분을 <div> 와 <span> 으로 구성하는 것이나 웹페이지는 문제 없이 동작한다. 그렇기에 각각의 부분에 해당하는 태그를 찾아 일일이 작성해 주는 것은 언뜻 비효율 적으로 보일 수 있다. 그럼에도 시맨틱 태그를 이용하여 웹페이지를 구성하는 것에는 이점이 있다.

우선 코드의 가독성이 높아진다. <div>로만 구성을 할 경우 class나 id를 통해서 그 구분을 만들어 주는데, 각 개발자마다 이름을 짓는 방식이 다를 수 있기 때문에, 코드 작성자가 아닌 사람들은 한번에 알아차리기 어려울 수 있다. 이와 반대로 시맨틱 태그들은 태그의 역할이 명확하기 때문에, 각 부분의 역할이 무엇인지 알아차리기 간단하다. 이와 같이 코드를 가독성이 좋게 작성할 경우, 다른 개발자와 소통하는 것 그리고 유지보수 하는 것에 있어서 더 수월하다.

또, 논시맨틱 태그와 달리 기계가 웹페이지 구성을 이해할 수 있게 된다. 따라서 검색 엔진이 좀 더 효율적으로 일을 처리하거나, 혹은 시각 장애인을 위한 웹페이지를 소리로 전달하는 서비스 등을 가능케 한다.

예제로 돌아와서

<img src="<url>" alt="image description" />

<div class="imageFile" style="background-image:<url>"></div>

<img>라는 시맨틱 태그를 이용해서 이미지를 추가하는 방법 그리고 <div>로 컨테이너를 만들고 css 스타일링을 통해서 이미지를 추가하는 방법을 배웠다.

한 방법이 다른 방법보다 낫거나 하진 않다. 그때 그때 상황에 맞는 것을 골라서 사용하면 된다. 이미지 자체가 웹페이지에서 중요한 의미를 가진다면 시맨틱 태그를 이용해서 나타낼 것이다. 텍스트가 있고, 이미지가 배경화면의 역할을 해야 한다면 css 스타일링을 통해 이미지를 나타낼 것이다.