HTML5 문서 구조화

구조화가 중요한 이유

브라우저를 통해 보는 것 이상으로 웹 문서에 들어 있는 정보 탐색이 중요한 시대가 왔다. 빅 데이터와 함께 사물 인터넷(IOT, Internet of things) 시대에는 사물 속에 내장된 컴퓨터들이 스스로 찾든 검색엔진을 이용하든 인터넷 상의 웹 문서에서 의미 있는 정보를 찾는다. 그러므로 탐색이 쉬워 검색엔진이 좋아하는 웹 사이트를 만들어야 웹 사이트의 가치가 올라간다.

 

HTML5 문서의 구조와 시맨틱 태그

<header></header> 

페이지나 섹션의 머리말을 표현하는 태그

페이지 제목, 페이지를 소개하는 간단한 설명이 들어간다.

<section> 이나 <article> 내에도 사용된다.

 

< nav></nav>

navigation의 줄임말로 하이퍼링크들을 모아 놓은 특별한 섹션

페이지 내 목차를 만들기 위해 주로 사용된다.

 

<section></section>

문서의 장(chapter, section) 혹은 절을 구성하는 역할을 하며 섹션이라고 부른다. 

 

<article></article>

본문과 연관되어 있지만, 독립적인 콘텐츠를 담는 영역이다.

<section>이 본문의 필수적인 내용을 담는다면, <article>은 웹 페이지의 본질을 훼손하지 않는 내용을 담는데 주로 사용된다.

 보조적인 기사, 블로그 포스트, 댓글이나 기타 독립적인 내영을 담는 영역

<article>에 담는 내용이 많은 경우 여러 <section>으로 나누어 담을 수 없다.

 

<aside></aside>

웹페이지 본문 흐름에서 약간 벗어난 노트나 팁, 신문, 잡지에서 주요 기사 옆에 짤막하게 곁들이는 관련기사.

문서의 주요부분에서 벗어난 내용을 담기 때문에, 페이지의 오른쪽이나 왼쪽에 주로 배치한다.

 

<footer></footer>

꼬리말 영역을 표시하는 태그

페이지나 <section>내에 꼬리말을 담는다.

이곳에는 주로 저자나 저작권 정보 등을 주로 표시한다.

<header>와<footer>가 꼭 웹페이지의 서두와 말미에 배치될 필요는 없다.

 

css3을 이용해 만든 구조의 예 (위의 태그들의 위치나 모양은 브라우저에 의해 자동으로 정해지지 않는다.) 

 

시맨틱 블록 태그

<figure></figure>

그림을 블록화 하는 시맨틱 태그.

이미지, 동영상, 소스 코드 등 콘텐츠를 블록화 할 수 있다.

 

<details></details>

상세 정보를 담는 시맨틱 블록 태그이다.

브러우저 화면에 핸들이 나타나며 상세정보를 감추거나 보이게 할 수 있다.

 

<summary></summary>

<details>로 구성되는 블록의 제목을 표현한다.

 

 

 

시맨틱 블록 태그

<mark></mark> - 중요한 시간 텍스트임을 표시

<time></time> - 시간 정보임을 표시

<meter></meter> - 주어진 범위나 %의 데이터 양 표시

<prograss></prograss> - 작업의 진행 정도 표시