[HTML & CSS] Semantic Web 그리고Semantic tag에 대해서

hukim·2020년 9월 15일
0

HTML&CSS

목록 보기
4/4
post-custom-banner

Semantic Web (시맨틱 웹) 이란?

시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다. 웹의 창시자인 팀 버너스리가 1998년 제안했고 현재 W3C에 의해 표준화 작업이 진행 중이다. - 위키백과

Semantic Web의 사전적 의미는 위와 같습니다. (위키백과 참조)

웹의 2세대가 시작되면서 사용자들이 생산하는 정보들은 어마어마하게 많아 졌습니다.
물론 인터넷에 있는 정보들은 유익한 정보들이 많습니다. 전문적인 지식을 가져야만 알 수 있는
지식들도 알 수가 있고, 생활에 필요한 정보들도 손쉽게 얻을 수 있게되었습니다.

하지만, 그에 따라 불필요한 정보들 혹은 잘못된 정보들도 접하게 된 것이죠. 그래서 이용자들은 수 많은 정보들을 자신이 필요한 정보만을 찾아나서야 하는 문제점이 생깁니다.

이러한 문제점을 해결하기 위해 "시맨틱 웹"이 도입되었고 시맨틱 웹은 우리에게 필요한 정보만을 보여주거나 가공해서 필요한 형태로 가공해주는 것을 의미합니다.

Semantic Tag(시맨틱 태그) 란?

Semantic Tag(시맨틱 태그)란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확하게 설명하는 역할을 합니다.

HTML5 이전까지는 Semantic Tag(시맨틱 태그)가 없었습니다. 대부분의 태그는 <div>
감싸져 있는 형태였고, 개발자의 입장에서는 페이지 전체의 구조 파악하기가 힘들었고,
검색 엔진들은 의미를 정확히 파악하지 못하니 결과 값의 정확도도 떨어졌을 것입니다.

예를 들면

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

이랬던 코드가

<header>contents</header>

다음과 같은 코드로 사용할 수 있게 된 것입니다.

Semantic Tag(시맨틱 태그)는 <header>이외에도

<section>, <footer>, <article>, <aside>, <nav>, <address>, <item>, <form>, ...

등을 사용할 수 있습니다.

HTML의 요소는 non-semantic 요소, semantic 요소로 구분할 수 있습니다.

  • non-semantic 요소
    <div>, <span>등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않습니다.
  • semantic 요소
    <form>,<table>,<img> 등이 있으며 content에 의미를 명확히 설명합니다.

Question

"사이트에 이미지를 넣는 방법이 두 가지가 존재합니다.<img>태그의 이용과 <div>태그에서
<background-image> 속성을 추가하는 것입니다. 두 가지 방법은 서로 어떤 차이가 있을까요? 그리고 각각 어떠한 경우에 사용하면 좋은지 설명해주세요."

<img> 태그는 이미지에 대한 설명을 넣을 수 있습니다. 그렇기 때문에 실질적인 이미지의 정보가 실제 페이지의 실질적 내용일 경우 사용할 수 있습니다.
<background-image>는 이미지에 대한 정보가 없습니다. 표현하려는 이미지가 실질적인 내용이 아닌 장식으로 하고 싶을 때 사용하는 것이 좋습니다.

post-custom-banner

0개의 댓글