-
[HTML] 시멘틱 웹, 시멘틱 태그공부/Web 2019. 5. 29. 20:47
시멘틱 웹
시멘틱 웹을 위키백과에서는 이렇게 정의한다
시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로, 현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다. 웹의 창시자인 팀 버너스리가 1998년 제안했고 현재 W3C에 의해 표준화 작업이 진행 중이다.
출처 : https://ko.wikipedia.org/wiki/%EC%8B%9C%EB%A7%A8%ED%8B%B1_%EC%9B%B9
어려운게 아니다.
기존의 방법과 다르게 웹자체에 의미를 컴퓨터가 처리할 수 있게 하는것이다.
HTML5에서의 시멘틱 웹
HTML5가 생기기 전에는 시멘틱 태그라는 개념이 없었다.
기존에 영역을 나누는 태그인 div에 따로 명시해서 태그를 구분했다고 한다.
하지만 지금은 시멘틱 태그라는 태그를 이용해서 태그의 의미를 사람이 읽기 쉽고 컴퓨터도 이해할수 있게 되었다.
대표적인 태그로는 header, nav, section, article, footer, aside 태그가 있다
header
header 태그는 문서의 헤더를 의미하고 문서의 위에 위치한다.
nav
nav 태그는 문서의 네비게이션 링크들을 담는다
section
section 태그는 문서의 컨텐츠들을 주제별로 나눌때 사용한다.
article
article 태그는 문서의 실제 내용이 담긴다.
뉴스, 기사, 블로그 포스팅등이 포함된다.aside
aside 태그는 본문 내용과 상관 없는것들이 들어간다
광고나 베너같은것이 예시.footer
footer 태그는 문서의 맨 아래 위치한다.
블로그나 웹페이지 아래에 위치한 웹페이지 주인의 연락처, 이름등등이 들어가는 곳이다.
이렇게 보면 이해를 못하니
시멘틱 태그를 이용해서 간단하게 html을 짜봤다.<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>시멘틱 웹이란 무엇일까?</title> <style> *{ margin: 10px; padding: 5px; } .sementic{ background-color: beige; color: black; } header, nav, section, article, footer, aside{ border: 1px solid black; margin: 10px; padding: 10px; } </style> </head> <body class="sementic"> <header> <h1>header</h1> <p> 문서의 제목이나 머리말에 헤당합니다 </p> </header> <nav> <h1>nav</h1> <p> nav태그입니다 메뉴 안내같은 네비게이션을 의미합니다 <br> 연결되는 링크에 많이 사용합니다 </p> </nav> <section> <h2>section</h2> <p> section 태그입니다 <br> 컨텐츠를 주제별로 묶을때 사용합니다 </p> <article> <h3>article</h3> <p> article 태그입니다 <br><br> section 태그 안에 들어갈 수 있으며 section 태그의 하위 개념입니다<br> 뉴스 기사, 게시물등을 넣어두는 태그입니다 <br><br> 문서의 주 내용이 들어갑니다 </p> </article> </section> <aside> <h3>aside</h3> <p> aside 태그입니다. <br><br> 본문 내용과 연관없는 내용이 담깁니다 <br><br> 광고나 배너등이 포함됩니다 <br> </p> </aside> <footer> <h3>footer</h3> <p> footer태그입니다 <br> </p> </footer> </body> </html>제대로 이해한건지 모르겠지만 시멘틱 웹에 대해서 알아봤다.
웹에 의미를 부여해서 사람도 기계도 잘 알아먹을수 있게 해보자! 이런 뜻인거 같다
'공부 > Web' 카테고리의 다른 글
[web/JavaScript] 제어대상을 찾는 방법 (0) 2019.05.22