[TIL] Semantic WEB & Tag - 2020.12.14

Hyeseong·2020년 12월 14일

TIL

목록 보기

1/13

시맨틱 웹(Semantic Web)은 "의미론적인 웹"이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미합니다. (물론 사람도 이해할 수 있습니다.)

웹 2.0 시대가 시작되면서 사용자들이 생산하는 정보들이 많아지다가 그 양이 너무 많아졌습니다.

우리에게 필요하고 유익한 정보들도 많지만, 불필요한 정보들도 넘쳐나게 되었죠. 이렇게 되면 사람들이 일일이 수 많은 정보들 가운데에 자신이 필요한 정보를 찾아나서야 하는 문제점이 생기게 됩니다.

이러한 문제점을 해결하기 위한 방법이 "시맨틱 웹"이라는 개념이었고, 웹의 창시자 '팀 버너스 리(Tim Berners-Lee)'가 제안했습니다.

시맨틱 웹은 기계가 사람을 대신해서 웹 페이지의 정보를 이해하고, 우리에게 필요한 정보만 보여주거나 정보를 가공해서 우리가 필요로 하는 형태로 가공해주는 것을 의미합니다.
그러기 위해서는 기계가 웹 페이지를 이해할 수 있도록 해주어야 합니다.

그런 의미에서 과거의 웹 문서는 많은 정보를 담지 못했습니다.

예를 들어서 웹 사이트에 대한 설명을 넣고 싶었다면, <body></body>에 직접 웹사이트에 대한 설명을 넣는것 외에는 방법이 없었습니다. 그런데 <body>태그에 들어간 내용들은 사람들에게 보여주고 싶을 때나 아닐때나 항상 보이게 됩니다.

하지만 지금은 <meta>태그를 이용해 다양한 설명과 이미지, 파비콘 등을 지정할 수 있게 되면서 웹 문서에 담을 수 있는 정보들이 늘어났습니다.

시맨틱 웹은 여기에서 한 단계 더 나아간 방식입니다. 웹 문서에 더 많은 정보들을 담을 수 있고, 웹 문서를 크롤링해가는 검색 엔진 로봇들에게 더 많은 정보를 알려줍니다.

예를 들면 이런 방식입니다.

과거에는

<div id="header"></div>

로 나타냈던 태그를

<header></header>

로 나타내는 것입니다.

로봇은 id가 header라고 적혀 있다고 해서 그 부분이 웹 페이지의 헤더에 해당하는지 알 수 없습니다. 게다가 사람에 따라서는 'pageHeader'과 같이 다른 형태로 header id를 작성하는 사람도 있을 수 있습니다.

하지만 <header>라는 태그를 사용해서 웹 사이트의 헤더를 정의해주면 기계도 이 부분이 웹 페이지의 헤더라는 것을 이해할 수 있습니다.

시멘틱요소(Semantic elements) = 의미를 가진 요소(elements with a meaning.)

개발자와 브라우저에게 명확히 해당 의미를 설명해주는 요소를 시멘틱 요소라고 해요.

많은 웹사이트에서 div태그와 id, class속성에 아래와 같이 값을 넣어서 표현해요.

아래는 이와는 대조적으로 시멘틱 태그를 나열한 리스트에요.

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

어제보다 오늘 그리고 오늘 보다 내일...