티스토리 뷰

study/Web

Semantic Web과 Semantic Tag

xoxowo 2022. 6. 21. 10:15

시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻인데, 2001년 팀 버너스리등에 의해 웹 기술의 비전으로 시맨틱 웹이 제시되었다고 한다. 시맨틱 웹은 기존 웹을 확장하여 컴퓨터가 이해할 수 있는 정의된 의미를 기반으로 의미적 상호운용성(semantic interoperability)을 실현하여, 다양한 정보자원의 처리 자동화, 데이터의 통합 및 재사용 등을 컴퓨터가 스스로 수행하여, 인간과 컴퓨터 모두 잘 이해할 수 있는 웹을 만드는 것이 목표이다.

 

시맨틱 태그 (Semantic Tag)

사전적의미 그대로 '의미가 있는 태그'이며, 브라우저, 검색엔진, 개발자 모두에게 컨텐츠의 의미를 명확히 설명하는 역활이며, 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹의 실현을 위해 HTML5가 출시되면서 시맨틱 태그가 도입되었다.

 

이전에는 작성했던 태그는 단순히 내용을 작성하는데 그쳐 세부 내용을 봐야 했다면,

<div class="header"> 메인 제목 </div>

시맨틱 태그인 header 태그를 사용하여 코드를 직관적으로, 더 의미론적으로 정보를 나타낼수 있게 되었다.

<header> 메인 제목 </header>

시맨틱 태그는 <article>, <aside>, <details>, <figcaption> 등등 여러 종류가 있으며, 주로 자주 사용하는 시맨틱 태그는 아래와 같다.

header  화면 상단에 위치하며 웹사이트의 이름이 들어가는 헤더를 의미한다.

nav  보통 헤더 하단에 위치하며 사이트 메뉴인 내비게이션을 의미한다.

aside  사이드에 위치하는 공간을 의미하며 사이트의 광고와 같은 내용이 들어간다.

section 서로 관련있는 콘텐츠 내용이 들어간다.

article  독립적인 콘텐츠 내용이 들어간다.

footer  화면 하단에 위치하며 푸터를 의미

 

 

 

 


이미지 및 내용 전문 출처 - w3schools

'study > Web' 카테고리의 다른 글

디자인 패턴 - 팩토리 패턴 (factory pattern)  (0) 2022.10.06
디자인 패턴 - 싱글톤 패턴 (singleton pattern)  (0) 2022.10.06
Mqtt protocol  (0) 2022.08.29
HTTP 통신 구조  (0) 2022.07.19
CSS- display, position  (0) 2022.06.22
댓글