'Semantic Tag'와 'Semantic Web'
'Semantic Tag'와 'Semantic Web'
📌 Semantic Tag
- •
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태그이다. 보통 다른 프로퍼티를 추가하여 디자인을 보여주기 위해 사용하는 경우가 많다.