TIL 16 day semantic web vs semantic element

Winney·2020년 9월 14일
0
post-thumbnail

semantic Web 의미론적 웹

의미론적 웹(시멘틱 웹, semantic web)이란 WWW(World Wide Web)의 확장으로 W3C(World Wide Web Consortium)에 의해 설정된다. 의미론적 웹의 목적은 기계인 컴퓨터가 인터넷 데이터를 읽을 수 있게 하는 것이다. 데이터의 의미론적인 인코딩을 하기 위해서 사용되는 기술은 RDF(Resource Description Framework)와 OWL(Web Ontology Language)가 있다. 이 기술들은 형식적으로 메타데이터를 나타낸다. 예를 들어 온톨로지는 개념과 각 독립체 사이의 관계 및 사물의 범주를 기술 할 수 있다.이러한 내재된 의미들은 데이터에대한 추론과 이질적인 데이터 출처(heterogeneous data sources)의 운용에 중요한 이점을 제공한다. 의미론적 웹은 XML에 기반하고 있다.

의미론적 웹과 현재 웹의 차이

기존의 HTML은 컴퓨터가 의미정보를 해석 할 수 있는 메타데이터보다 사람의 눈에 보기 용이한 시각정보에 대한 메타데이터와 자연어로 기술된 문장으로 되어있다. 예를 들면 '<em>바나나<em><em>노란색<em>이다.' 라는 예에서 컴퓨터는 이 HTML을 처리 할 때 바나나라는 개념과 노란색이라는 개념의 관계를 해석할 수 없다. <em>는 단순히 시각적인 강조를 표현 할 뿐이며 바나나가 노란색인 것은 자연어고 기계는 이를 단순 문자열로 해석해 표시한다.

HTML에서의 의미론적 웹

HTML을 이용해 의미론적 웹을 구현하기 위해서는 의미론적 태그(Semantic tag)를 사용하면 된다.

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

의미론적 태그를 사용할 경우 컴퓨터는 이 태그가 표시하는 것이 무엇인지 이해할 수 있다.

또한 <meta>태그는 컴퓨터가 웹 페이지의 내용을 분류할 수 있는 방법을 제공한다.

<meta name="keywords" content="computing, computer studies, computer" />
<meta name="description"content="Cheap widgets for sale" />
<meta name="author" content="John Doe" />

위와 같이 필드 이름(field name)인 'keywords'에는 'computing, computer studies, computer'가 할당되고 'description'에는 'content="Cheap widgets for sale'이 할당된다.
이런 메타데이터 태그와 분류를 통해 다른 컴퓨터 시스템이 이 데이터(위의 name)과 관련된 값(위의 content)에 쉽게 관련해 접근하고 공유 할 수 있다.

※ 인코딩 : 컴퓨터를 이용하여 영상, 이미지 또는 소리 데이터를 생성할 때, 원래의 데이터양을 줄이기 위하여 데이터를 코드화하고 압축하는 것
※ RDF : XML 등을 이용하여 웹에 관련된 메타데이터에 대한 범용적인 기술 언어. 메타데이터의 속성(프로퍼티)을 정의함으로써 서로 다른 응용 프로그램끼리의 데이터 교환 등이 효율적으로 이루어지는 것.
※ OWL : 웹 온톨로지 언어. 웹상에서 첨단의 웹 검색, 소프트웨어 에이전트 및 지식 관리 기능을 제공하는 온톨로지를 발간 및 공유하기 위한 시멘틱 웹 생성 언어이다. 자원 기술 프레임워크(RDF)의 확장 언어로 개발되었다.웹 온톨로지 언어(OWL)는 웹 온톨로지와 그에 관련된 지식을 정의하는 언어로 추론 시스템에 축적된 명제들을 정의하며, 클래스 및 그 구성원 간의 관계를 기술하고, 구문적으로 정의되지 않은 사실의 논리적 유추를 가능하게 하는 클래스 및 속성과 이에 적용할 수 있는 제약 사항의 집합으로 되어 있다.

Semantic Tag 의미론적 태그 (semantic element)

의미론적 태그란 의미를 가진 태그를 말한다. 의미론적 태그는 브라우저와 개발자 모두에게 이 태그에 대한 명확한 의미를 제공한다. 그럼으로서 컴퓨터가 해당 태그의 개념에 대해서 이해 할 수 있게 한다.
컴퓨터에게 <div>, <span>는 단순 문자열일 뿐이나 <article>, <aside>,<nav>는 해당 개념을 바탕으로 분류 및 개념확장을 할 수 있다.

semantic tag 장점

  • 검색 엔진은 의미론적 마크업을 페이지 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주한다. (SEO)
  • 시각 장애가 있는 사용자가 화면 판독기로 페이지 탐색 시 의미론적 마크업을 푯말로 사용 할 수 있다.
  • 의미있는 코드 블록을 찾는 것이 쉽다.
  • 개발자에게 태그 안에 채워질 데이터 유형을 보여준다.
  • semantic naming은 적절한 사용자 정의요소/ 구성요소의 이름 짓기를 반영한다.

Q. 사이트에 이미지를 넣는 방법은 두 가지가 있습니다. <img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요.
A.
HTML에서 <img>를 사용 할 경우 semantic tag를 사용했기 때문에 컴퓨터가 이 이미지에 대해서 이해 할 수 있다. alt attribute의 사용으로 시각장애인도 해당 이미지가 어떤 이미지인지 이해 할 수 있다. 또한 SEO에 적합하다. 해당 이미지가 전체 내용에 있어 필수적일 경우 <img>태그를 사용해야한다.
<div>태그에 background-image 속성을 쓸 경우 컴퓨터는 이를 의미론적으로 이해 할 수 없다. 내용 이해에 있어 중요한 이미지에는 사용 하면 안 된다.


출처

profile
프론트엔드 엔지니어

0개의 댓글