Semantic Web, Semantic Tags

Semantic Web

시멘틱 웹은 "의미론적인 웹"이라는 뜻으로, 현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종파일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임 워크이자 기술이다.

음... 무슨말인지 잘 모르겠는데, 내가 이해한 바로는 의미와 관계를 부여해 알아보기 쉽게 만든 웹세상? 이런 느낌이다...🤪

자! 그래서 나온게 Semantic Tag를 보면 이해하기가 쉽다.

Semantic Tag

Semantic Web을 구현하기 위한 의미를 가진 태그

w3schools.com에서의 정의

• non-semantic 요소
  <div>, <span>등 내용에 대해서 아무 설명도 하지 않는다.
• semantic 요소
  <form>, <table>, <article>등 내용에 대해서 명확히 설명한다.

아래는 주로 사용되는 Semantic Tag이다.

Semantic Tag를 사용하는 이유

기존에는 <div>태그 안에 id나 class속성으로 개발자별로 각자 이름을 지정하였기 때문에, 검색엔진이 html파일을 분석(크롤링 등..)할 때 정확하게 컨텐츠를 식별하기가 힘들었다.
그래서 태그에 의미성을 부여해 가독성과 접근성을 높인 것이다.
그리고 이러한 Semantic Tag을 활용함으로써 검색엔진에 최적화를 할수있다.

<img>태그와 CSS background-image 차이점

img 태그

1. 프린트가 가능하다.(그림 출력이 필요할땐 <img>태그를 사용해야 한다.
2. alt 속성 사용(그림이 렌더링 되지 못할때 나타날 문자열을 지정하기 위한 값, 시각장애인 등을 위에 문서의 내용을 목소리로 읽을 때, alt값을 읽어준다.)
3. 이미지가 컨텐츠에서 중요한 요소일때 사용한다.
4. SEO(검색엔진 최적화), 성능 등 많은 면에서 효율적이다.

background image

1. 단지 배경이미지 이다.(배경 이미지는 디자인적 요소)
2. 이미지 위에 텍스트가 필요하다.(디자인적 요소와 일맥상통)
3. 출력시 background image는 노출되지 않는다.
4. 이미지 에러 발생시 아무 것도 할수가 없다.

결론

background image를 지양하고 <img> 사용을 지향해야 한다고 생각 하는 사람도 많을 것이다. 본인도 틀린말이라고 생각 하지는 않다. 하지만 그 의미를 명확히 알고 구분할줄은 알아야 한다고 생각한다.

예를 들어,

• background-image속성에 있는 이미지는 Google 봇이 크롤링 하거나 색인하지 않는다.
• background-image속성은 접근성에 적합하지 않다. Screen readers는 background-image를 완전히 무시한다.
• 디바이스 화면 너비나 해상도에 관계없이 background-image 속성에 하나의 이미지만 사용되기 때문에 성능에 좋지 않다.

위와 같은 background-image의 단점이 있으므로 해당 상황에는 쓰지 않으면 되는 것이다.