Simentic Web이란? (img태그와 background-image의 차이)

HTML / CSS 기초를 다시 훑는 중 "Simentic Web, Simentic Tag란 무엇일까?" 라는 질문에 답하기 위해 포스팅합니다.

한 줄 정리

시멘틱 웹은 "컴퓨터가 이해할 수 있는 웹", "사람이 이해하기 쉬운 웹"이고 이를 가능하게 해주는 방법이 "시멘틱 태그"를 사용하는 것이다.

Simentic Web

Simentic Web을 직역하면 "의미론적인 웹"이란 뜻이다. 이를 한국어로 제대로 번역하면 1) 기계도 이해할수 있는 웹, 2) 개발자가 한층 더 이해하기 쉬운 웹 이라고 번역하면 될것 같다. 예를 들면 과거에는 <div> 태그 하나로 모든 HTML 문서를 작성 하다 보니 HTML 한 페이지 안에 div태그만 수십개가 존재했고, 이를 해결하기 위해 "id, class" 등의 attributes를 사용하여 개발해야 했다.

하지만 이런 방식의 개발은 가독성을 해치고, 더군다나 <div class="header"> 와 같은 div는 컴퓨터가 이 div가 헤더인지 알수 없었다. 따라서 이를 해결하기 위해 시멘틱 태그를 도입하게 되었다.

아래는 시멘틱 태그를 설명해준 w3schools의 링크이며, 아래 코드블럭에 자주 사용하는 시멘틱 태그들을 정리해보았다.

시멘틱 태그 (w3schools)

 <header>
<nav>
<main>
<section>
<article>
<aside>
<footer>

simentic tag를 사용하면 달라지는 점은 ?

위 설명란에 언급했듯 Simentic tag를 사용하면 컴퓨터가 해당 태그가 어떤 태그인지 알게 된다. 따라서 SEO에 도움을 주어 우리가 만드는 웹사이트가 검색창에 적절하게 보여질수 있게 된다. 또한 나 홀로 개발이 아닌 다른 사람과 함께 개발할 때에 가독성에 도움을 주어 유지보수 및 협업이 용이하게 된다.

img 태그를 통해 사진을 삽입할 때 (alt 속성에 값을 입력할 때)와 백그라운드-이미지를 통해 이미지를 삽입할 때는 (img:alt)의 조합이 시멘틱 웹에 더욱 적합한 조합이 된다. img태그를 사용함으로써 해당 부분이 img인것을 알게 되고, alt를 사용함에 따라 이미지에 대한 설명이 가능하다. 따라서 SEO에 도움을 주고, 그림이 없을 떄나, 그림을 볼수 없는 환경에서도 해당 이미지를 적절히 해석 사용할수 있게된다.

반면에 backgound-image를 통해 이미지를 삽입하면 html parser가 구문을 해석 할 필요가 없기에 성능 측면에서 조금 더 우세하다.