[HTML5 튜토리얼] HTML5에 추가된 Element들 그리고 문서의 구조화

* 이번에는 HTML5에 새로 추가된 문서 규격과 관련된 태그들과 문서의 구조화에 대해서 살펴보자.

2012/10/07 - [HTML5 튜토리얼] 공부 시작 - 계획

2012/10/25 - [HTML5 튜토리얼] HTML5의 등장 배경과 여러 가지 개발 환경 및 현재 현황

2012/11/03 - [HTML5 튜토리얼] 기초 및 기본 구조, 프로그래밍상 기존의 HTML과 바뀐 점

* 새로추가된 태그들

- 구조적인 표현을 위해 추가된 태그들

• <section> 태그: 일반적인 문서나 앱의 섹션을 나타낸다. h1, h2, h3, h4, h5, h6등과 같은 태그와 함께 문서의 구조를 나타낼때 사용할 수 있다.
• <article> 태그: 문서내의 하나의 독립적인 컨텐츠 부분을 나타낸다. 블로그 엔트리 또는 뉴스 기사 등에 사용
• <aside> 태그: 나머지 문서와는 아주 조금, 거의 연관이 없는 컨텐츠 부분을 나타낸다.
• <hgroup> 태그: <section>의 헤더를 나타낸다.
• <header> 태그: 소개 또는 네비게이션 도구의 그룹을 나타낸다.
• <footer> 태그: 섹션의 footer글 또는 작성자, 저작권 등의 정보를 나타낸다.
• <nav> 태그: 문서의 네이게이션을 도와주는 부분을 나타낸다.
• <figure> 태그: 컨텐츠와 연관된 미디어를 나타낸다.
• <figcaption> 태그: 옵셔널한 캡션 태그

- 다른 새로운 태그들

• <video> 태그: 비디오 미디어를 추가한다. 자체 UI를 제공한다.
• <audio> 태그: 오디오 미디어를 추가한다. 자체 UI를 제공한다.
• <source> 태그: <video>나 <audio>의 소스를 나타낸다.
• <track> 태그: 비디오를 위한 텍스트 트랙 제공
• <embed> 태그: 플러그인 컨텐츠를 위한 태그
• <canvas> 태그: 동적인 비트맵 그래픽을 활용하는 캔버스 공간
• <mark> 태그: 다른 컨텐츠와의 연관성을 문서 내부에 나타내기 위한 태그
• <progress> 태그: 다운로드 등을 할 때 얼마나 진행되었는지 보여주는 태그
• <meter> 태그: 디스크 사용량 등과 같은 측정치를 나타내는 태그
• <time> 태그: 날짜와 시간을 나타내는 태그
• <ruby>, <rt>, <rp> 태그: Ruby 를 표시하는 태그
• <bdi> 태그: 주위와 독립적으로 흐르는 텍스트를 나타내는 태그
• <wbr> 태그: 라인을 바꿀 수 있는 위치를 나타내는 태그
• <command> 태그: 사용자가 호출할 수 있는 커맨드를 나타내는 태그
• <details> 태그: 추가 정보나 사용자가 획득할 수 있는 컨트롤을 나타내는 태그
• <datalist> 태그: input의 list 속성과 함께 콤보박스를 만드는 태그
• <keygen> 태그: key pair를 생성하는 컨트롤 태그
• <output> 태그: 스크립트 등을 통해 계산된 결과를 나타내는 태그
• <input> 태그:  새로운 type들이 추가
• tel
• search
• url
• email
• datetime
• date
• month
• week
• time
• datetime-local
• number
• range
• color

* 반대로 없어진 태그들

- 여러 가지 사용성에 문제가 있거나 CSS로 하는 것이 효율적이거나 잘 사용이 되지 않아서 몇몇 태그들은 없어졌다. 아래가 없어진 태그들이다

• <basefont>태그
• <big> 태그
• <center> 태그
• <fonr> 태그
• <strike> 태그
• <tt> 태그
• <frame> 태그
• <frameset> 태그
• <noframes> 태그
• <acronym> 태그
• <applet> 태그
• <isindex> 태그
• <dir> 태그

: 기존 HTML4와 달라진점은 아래 사이트를 참고하면 된다.

http://www.w3.org/TR/2012/WD-html5-diff-20121025/

* 문서의 구조화

: 이번에는 위의 태그들을 이용하여 어떻게 문서를 구조화하게 되는지 알아보자. 아래는 HTML5로 만들어진 아주 간단한 사이트의 예이다. 이 사이트는 이미지 없이 오로지 HTML5와 CSS로만 디자인이 된 것이다. 이미지 또한 하나도 없다면 약간 놀랄수도 있을 것이다. 하지만 디자인 요소 보다는 HTML5의 문서 구조를 나타내는 각 태그들의 용도에 대하여 아주 잘 나타내고 있다.

: 여기서 상단의 블로그 텍스트와 메뉴는 커다란 그룹으로 묶어서 <header>를 나타내고 있고, <header> 안에는 위의 텍스트를 나타내는 <hgroup>과 메뉴를 나타내는 <nav>가 있다.

: 이런식으로 상단의 사이트를 소개하는 정보와 메뉴에 일반적으로 쓰여지는 태그이다. 그 다음에 중간에 나오는 샘플 포스트들은 각각이 <article> 태그 하나씩 나타낸다. 제목은 <header>로 나타내고 Written by 정도는 <footer>에 포함하는 정보들이다.

: <article>들의 오른쪽에 있는 트위터 내용은 컨텐츠와 아주 연관이 많지는 않는 <aside> 태그를 사용하는 위치이다. 저런식으로 사이드바를 나타내고, aside 안에 네비게이션을 하는 메뉴가 있다면 다시 <nav>  태그를 포함하기도 한다. 하나의 <aside> 안에 3개의 <section>으로 나눠서 디자인을 한 것을 볼 수 있다.

: 마지막은 3개의 <section>으로 이루어져있는 <footer>이다. 각 section은 제목과 내용 식으로 이루어져있거나 목록을 가지고 있다.

: 위의 태그들이 나오게된 배경은 기존의 웹페이지들이 가장 많이 사용하고 있는 id와 용도를 분석하여 활용도가 높은 태그들을 새로 만들게 된 것이다.

: 이러한 식으로 이전에는 <div>와 <span>으로 무의미하게 구성되어있던 문서의 구조를 각 부분을 나타내는 태그를 활용함으로써 문서를 구조화하고, 서로 다른 환경에서 비슷한 용도로 다른 표현 방식으로 표현될 수 있도록 하고 있는 것이다. 이는 향후 웹페이지의 데이터 분석 등을 더욱더 효율적으로 할 수 있도록 지원해주는 역할도 할것이라고 예상하고 있다.

* 다음에는 HTML5의 가장 핵심적인 태그 중 하나인 Canvas 태그에 대해서 알아보자.

* 다음편

2012/11/18 - [HTML5 튜토리얼] Canvas 기초 강좌

2012/11/23 - [HTML5 튜토리얼] Video와 Audio 태그 기본

2012/12/03 - [HTML5 튜토리얼] 새로운 form element 들

2016/05/04 - [HTML5 튜토리얼] Web storage (localStorage, sessionStorage)

2017/01/09 - [HTML5 튜토리얼] navigator.geolocation 위치 정보 수집 API

끝.