[TIL] 002. 'Semantic Tag'와 'Semantic Web'

'Semantic Tag'와 'Semantic Web'

Semantic Tag

Semantic Tag란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 하는 html태그를 말한다.

• non-semantic 태그
  div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.

• semantic 태그
  form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다,

html5에서는 위와같은 시맨틱 태그를 제공하여 html태그의 의미를 명확하게 할 수 있게 되었다.

Semantic Web

• 시맨틱 웹은 '의미론적인 웹'이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미한다.
• div, span 같은 무의미한 논 시맨틱 요소들만을 사용하여 마크업한 웹사이트와 form, table, img 같은 시맨틱 요소를 사용하여 마크업한 웹사이트 이 두가지 경우중 후자가 시맨틱 웹에 가깝다고 할 수 있다.
• 시맨틱 요소를 이용하여 작성한 웹사이트는 보다 효과적인 크롤링과 인덱싱이 가능하다.

---

img태그 or div태그에 background-image

img태그를 사용하여 이미지를 화면에 노출시키는것과 빈 div태그에 CSS background-image프로퍼티를 적용하여 노출시키는것은 둘 다 화면에 보이는 결과는 같다. 하지만 시맨틱웹에 대한 생각을 적용시킨다면 둘의 차이점을 알 수 있을것이다.

img태그

img태그로 작성한 경우, 태그는 존재만으로도 이미지라는 의미를 담고있으며 alt나 title 같은 속성을 추가하여 부연설명이 가능하다. 그러므로 이 img태그는 semantic요소를 적용한 semantic태그라고 할 수 있다. 또한 웹 접근성이 고려되어야 하는 사이트에 적합하다.

div태그에 background-image

div태그에 background-image를 적용한 경우, 이 div태그는 이미지에대한 의미와 관련성이 없는 non-semantic태그이다. 보통 다른 프로퍼티를 추가하여 디자인을 보여주기 위해 사용하는 경우가 많다.