[HTML] 1_Semantic Web vs Semantic Tag

dev.soo·2020년 8월 19일
0

html

목록 보기
1/1

Semantic : ad. relating to meaning in language or logic

  Semantic Web 이란 무엇일까? 위에 기술된 semantic 의 뜻과 함께 살펴보았다. 일반 앱과 다른점은 "의미"를 갖는다는 것이다.

  기존의 일반 웹은 사람의 눈으로 보기에 용이한 메타데이터와 자연어로 기술되어 있다면, semantic web 이란 컴퓨터가 의미정보를 해석할 수 있는 메타데이터로 구성되어 있다. 이를 통해 자동화된 기계가 문서를 이해하고 해석할 수 있게 된다.

  Semantic Tag 는 Non-semantic tag 와 반대되는 개념으로, 요소의 content 에 대한 정보를 담는 tag 이다. 다음의 tag 들은 모두 웹페이지의 파트에 대한 의미를 전달하는 semantic tag 에 해당한다.

article, aside, details, figcaption, figure, footer, header, main, mark, nav, section, summary, time...

반면 Non-semantic tag 는 div, span 처럼 웹페이지 내에서 해당 부분이 갖는 의미에 대한 정보는 포함하지 않으며 css 사용을 위한 구분이다.

둘의 차이점을 다음 예시를 통해 살펴 볼 수 있다.

  사이트에 이미지를 넣을 때, img 태그를 사용하거나 태그에 background-image 속성을 추가하는 경우가 있다.
  Samentic tag 인 img 태그를 사용하면 모든 이미지들의 속성을 변경하고 싶은 경우, 예를 들어 모든 이미지들을 흑백으로 바꿔야 할 때, 편리하게 수정 가능하다. 다시 말해 깔끔한 code 작성이 가능하고 maintenance 도 용이해진다.
  또한 Sementic web 의 특성과 관련하여 해당 이미지에 대한 웹 접근성(web accessibility)를 높이고 검색엔진 최적화(SEO: Search Engine Optimization)를 가능하게 해준다.

  반면 background-image 속성을 추가하게 되는 경우, 단순히 이미지를 추가하여 시각적인 효과만 단순하게 주게 된다. background-image 의 content 가 비어 있으면 아무 이미지도 나타나지 않게 되는 효과를 줄 수 있다.

0개의 댓글