Semantic Web과 Semantic Tag에 대해 알아보자
Semantic Web 탄생배경❗
- 웹 기술이 발전하고 인터넷이 보급되면서 무분별하게 많은 정보들이 축적되자, 컴퓨터가 정보를 해석하고 가공할 수 없는 상태가 되었다.
- 모든 정보를 사용자가 직접 정보를 처리해야 되는 불편함이 생긴 것이다.
- 이러한 문제를 해결하고자, 기계가 읽고 처리할 수 있도록 개발한 웹이 Semantic Web이다.
일반 웹은 컴퓨터가 정보를 알지 못하지만 semantic 웹은 컴퓨터가 정보를 알 수 있다
Semantic Tag란❓
- 시맨틱 태그(Semantic Tag)에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고, 데이터를 활용할 수 있는 시맨틱 웹(Semantic Web)을 실현할 수 있다.
- 의미가 없는 태그를 무분별하게 사용하는 것이 정보의 혼란을 야기하기 때문에, HTML4에서 HTML5로 넘어가면서 의미있는 태그들을 개발하기 시작했다.
- 즉, 시맨틱 태그(Semantic Tag)란 의미있는 태그이다. 브라우저, 컴퓨터, 검색엔진 등 콘텐츠의 의미를 명확히 설명하는 역할을 하며, 시맨틱 웹(Semantic Web)을 구축하여 컴퓨터는 정보를 좀 더 효율적으로 받아 올 수 있고, Tag의 의미를 통해 더욱 정확하게 정보를 제공한다.
Semantic Tag 종류와 의미❗
- form, table, img_** 등 content의 의미를 명확하게 설명하는 태그이다.
- HTML5에 들어서면서
<article>
: 그 자체로 의미가 있는 웹사이트의 부분, 게시물, 잡지 또는 신문 기사, 블로그 작성글, 제품 카드, 댓글, 대화형 위젯 등.
<aside>
: 간접적으로 문서와 관련된 내용을 나타냄. 사이드바 또는 콜아웃 상자로 사용됨.
<footer>
: 일반적으로 섹션의 작성자에 대한 정보, 저작권 데이터 또는 관련 문서에 대한 링크를 나타냄.
<header>
: 페이지의 제목과 같은 소개 내용을 포함.
<main>
: 지배적인 콘텐츠 영역을 나타내는 태그.
<nav>
: 메뉴, 목차 등에 사용.
<section>
: 구체적인 시맨틱 태그가 없는 문서의 독립적인 영역을 나타냄. 섹션에는 소수의 예외를 제외하고 일반적으로 제목이 있다.
Semantic Tag 장점❗
-
검색엔진최적화(SEO) : 검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다. 따라서 시맨틱 태그를 사용한 코드 블록을 찾는 것은 끝없는 div(div > div > div ...)를 탐색하는 것보다 훨씬 쉽다.
-
W3C에 따르면 "시맨틱 웹을 사용하면 애플리케이션, 기업 및 커뮤니티에서 데이터를 공유하고 재사용할 수 있다"고 한다. 한 마디로 코드 가독성과 품질이 올라간다는 뜻.
Semantic Tag 사용 유의사항❗
- 사용할 태그의 의미가 무엇인가? : 사용할 HTML은 태그는 데이터를 기반으로 결정되어야 한다.