Semantic Web과 Semantic Tag에 대한 공부를 하겠습니다.
HTML4와 HTML5의 차이점이 무엇일까요? 바로 다음 배우게 되는 내용과 관계가 있습니다.Semantic Web의 등장 전과 후의 차이인데요.
Semantic Web이란?
(https://ko.wikipedia.org/wiki/%EC%8B%9C%EB%A7%A8%ED%8B%B1_%EC%9B%B9)
'의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서
리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계
즉, 컴퓨터가 웹 사이트를 단순한 코드가 아닌 의미를 갖도록 하는 사이트라는 것!
인터넷을 검색해보니,
시멘틱 웹의 이상향은 인터넷에서 무수히 많은 양의 데이터를 컴퓨터가 자동으로 해석해 사용자가 원하는 결과의 값을 정확하게 딱 주는 것이라고 한다.(SEO,검색엔진최적화)
Semantic Tag는 뭐지?
HTML5 이후 시멘틱 태그라는 새로운 것이 등장했다.
이 기능은 사이트 전체 구조를 한 눈에 파악하기 쉽도록 만든 것이 시맨틱 웹이고 그에 따라서 HTML5에서 시멘틱 태그라는 것이 나온것이다.
이전에는 div안에 wrap,header,content와 같은 nameing을 id 혹은 class에 정의해 큰 레이아웃을 구현하였다.
<div class="nav">네이게이터입니다</div>
하지만, HTML5에서는 아래와 같이 태그 자체로 레이아웃을 구현할 수 있게 되었다.
<nav>HTML의 nav라고 합니다</nav>
그렇게 되면 이전보다 개발자들이 코드로 사이트 전체 구조를 볼 때 한눈에 파악할 수 있게 된다.
Semantic Tag 를 알아보겠습니다. 총 6가지 입니다.
<header></header>- 문서의 header를 나타낼 때 사용
- 사이트 로고, 글로벌 링크(회원가입, 언어셋 등), 소개 등을 넣습니다.
<nav></nav>- 문서의 navigation을 나타낼 때 사용
- 보통 메뉴 영역으로 사용합니다.
- 브라우저가 네비게이션 영역을 알 수 있게되면 검색엔진 색인에 도움을 제공
<section></section>-
문서의 section을 의미하며, 같은 성격의 내용일 때 section으로 묶어 사용
-
section 내부에는 header와 footer가 올 수 있음, 이 때 사용되는 태그는 해당 영역에 대한 제목과 꼬리말로 사용
-
HTML5 시맨틱 태그의 주요한 부분을 담당
<article></artice>-
section 태그의 하위 개념으로 분류되며 뉴스 기사나 블로그 글 같은 독립적인 내용이 들어감
-
acticle은 다른 사이트에 배포하거나 재사용이 가능
-
footer 내부에는 footer가 올 수 있는데, 이 때 사용되는 태그는 해당 영역에 대한 꼬리말로 사용
-
주로 acticle 영역에 대한 작성자의 정보나 연락처 등을 넣움
<aside></aside>-
본문 전체 내용과 직접적인 연관성이 없는 분리된 내용을 담을 때 사용
-
주로 사이드바에 사용되며 다른 예로는 배너 광고, 위젯등
<footer></footer>-
문서의 footer를 나타낼 때 사용하고, 주소나 연락처, 저작권 등 넣음
-
일반적으로 footer는 문서 내 한 번만 사용되지만, section이나 article에 해당 영역에 대한 footer로 사용
