[TIL] Semantic Web과 Semantic Tags

minami·2021년 11월 30일
0

wecode

목록 보기
2/10

Semantic Web과 Semantic Tags

1. Semantic

의미의, 의미론적인

Semantic은 어문계열을 전공했다면 의미론을 공부할 때 들어봤을 단어이다. Semantics가 의미론이라는 뜻이기 때문. 그러니 semantic은 형용사로 의미의, 의미론적인 같은 뜻이 된다.

그런데 이 단어가 웹이랑 결합되면?

2. Semantic Web

의미론적인 웹. 웹 3.0. 데이터의 웹. 연결된 데이터를 컴퓨터가 이해하고 논리적 추론까지 가능하게 하는 차세대 지능형 웹

시맨틱 웹의 탄생 배경

  • 시맨틱 웹은 2001년에 팀 버너스-리(Tim Berners-Lee)가 제시한 개념
  • 기존 웹페이지들은 사람은 눈으로 보고 이해할 수 있어도 컴퓨터가 이해하고 해석할 수는 없는 자연어 기반의 태그로 만들어져 있어서 웹의 발전과 함께 축적된 방대한 양의 데이터를 검색할 때 말 그대로 정보의 홍수가 발생
  • 웹상의 데이터에 메타데이터를 부여하여 그저 단순한 데이터 집합이 아니라 의미관계를 갖도록 하여 컴퓨터가 의미 정보를 이해하고 해석할 수 있도록 하여 사용자 개입 없이 컴퓨터 스스로 필요한 정보를 찾아서 가공할 수 있게 하자!

3. Semantic Tags

의미있는 태그. 브라우저와 개발자 모두에게 의미를 명확하게 표현하는 시맨틱 요소

  • HTML 시맨틱 요소는 non-semantic 요소와 semantic 요소로 나뉜다.

  • non-semantic 요소: 해당 요소의 내용물에 대해 아무것도 알려주지 않는다.

    예) <div>, <span>, <em>

  • semantic 요소: 해당 요소의 내용물에 대해 명확하게 표현한다.

    예) <form>, <table>, <article>

3-1. HTML5 이전의 HTML 시맨틱 요소

HTML5 이전의 많은 웹사이트들은 HTML 코드에 <div id="nav"><div class="header">처럼 non-semantic 요소에 id 또는 class를 부여하는 형식으로 작성되었다. 그래서 사람이 눈으로 코드를 보면 해당 요소의 의미나 역할 등을 알 수 있었지만, 컴퓨터가 이해할 수는 없었기 때문에 특히 검색엔진의 robot이 수집한 정보를 컴퓨터가 알아서 해석하거나 가공할 수 없었다.

우리가 항상 요즘 시대는 정보의 홍수다, 정보의 취사선택을 할 줄 알아야 한다 했던 것들도 다 그래서였던 것인가...!

여하튼 이러한 문제를 해결하고자 HTML5에서 새로이 추가된 시맨틱 요소들이 있다.

3-1. HTML5에서 추가된 시맨틱 요소

HTML5에서 추가된 시맨틱 요소들 중 몇 가지만 예시를 들어보자.

태그설명
<article>독립적이고 스스로를 포함한 컨텐츠
<aside>페이지 컨텐츠 옆의 컨텐츠
<details>사용자가 나타내거나 숨길 수 있는 부가적인 상세사항

4. <img><div style="background-image: ./img.jpg;">의 차이

4-1. <img>

  • semantic 요소이므로 사람과 컴퓨터 모두가 이해할 수 있다.
  • 검색엔진도 해당 요소를 이미지로 해석하므로 SEO(검색엔진 최적화)에 도움이 된다.
  • alt 속성을 추가하여 이미지가 깨졌을 때뿐만이 아니라, 해당 이미지가 등록된 웹사이트를 사용하는 시각장애인도 해당 이미지가 무엇인지 알 수 있다.

4-2. <div style="background-image: ./img.jpg;">

  • non-semantic 요소이므로 사람만 해석이 가능하다.
  • 컴퓨터가 이미지로 해석할 수 없기 때문에 검색엔진에 노출되지 않을 가능성이 높다.
  • 이미지가 깨져도 무슨 이미지인지 알 수 없다.
profile
함께 나아가는 개발자💪

0개의 댓글