최근 IE9 프리뷰 버전이 발표되면서 HTML5와 CSS3는 최신 브라우저에서 거의 다 지원되고 있다.
cross-browser를 위해서 뿐만 아니라 모바일 웹을 위해서도 이제 HTML5가 해답이 되고 있다.
HTML5에서는 기존의 HTML4의 태그들을 그대로 사용하면서 새로운 의미와 기능을 가진 몇 가지 태그들이 더 추가된다.
달라지거나 새로운 추가되는 태그들을 살펴보자.
HTML5 문서의 구조
HTML5은 문서를 좀더 쉽게 구조화할 수 있도록 몇 가지 요소들을 도입했다. 대부분의 HTML4 페이지는 헤더와 푸터, 몇 개의 칼럼 등 다양한 형태의 구조로 이루어져 있고 id나 클래스 스타일이 적용된 div 요소를 사용하고 있다.
|
(위 그림은 id와 클래스가 있는 div를 사용한 일반적인 컬럼 두 개짜리 레이아웃이다. 여기에는 헤더와 푸터가 있고, 헤더 바로 아래에 가로 내비게이션이 있다. 메인 콘텐츠에는 아티클이 있고 오른쪽에 사이드바가 있다.)
HTML4에서는 이런 요소들을 따로 세세하게 설명할 수 있는 시맨틱이 부족하기 때문에 div 요소를 사용하고 있지만 HTML5에서는 각각의 서로 다른 섹션을 표현하는 새로운 요소를 도입함으로써 이런 문제를 해결하고 있다.
|
(div 요소를 header와 nav, section, article, aside, footer 같은 새로운 요소로 대체했다.)
이런 구조를 마크업으로 표현하면 다음과 같다.
<body>
<header>...</header>
<nav>....</nav>
<article>
<section>
....
</section>
</article>
<aside> .... </aside>
<footer> .... </footer>
</body>
이제 HTML5에서의 주요 요소들을 간단히 살펴보자.
DOCTYPE
HTML5에서는 DOCTYPE 선언부분이 아주 간단하다.
<! DOCTYPE html>
CHARSET
HTML5에서는 문자셋 지정도 훨씬 간단해졌다.
<meta charset="utf-8>
HEADER
header는 새로 도입된 요소로, 사이트의 상단 부분에 해당한다.
이 요소에는 사이트에 대한 소개 정보나 사이트의 주메뉴 등이 포함된다.
일반적으로 header 요소 안에는 머리말 태그(h1~h6)나 hgroup 태그를 사용하는데 꼭 그래야 하는 것은 아니다.
header 요소에는 검색 창이나 로고가 들어가기도 한다.
다음은 header 섹션의 예이다.
<header>
<nav>
<ul>
<li><a href="./#>Home</a></li>
<li><a href="./#>Portfolio</a></li>
<li><a href="./#>About</a></li>
<li><a href="./#>Contact</a></li>
</ul>
</nav>
</header>
NAV
XHTML 로 사이트를 만들 때는 클래스 스타일 div나 ID 스타일 UL을 이용해서 내비게이션을 만들었지만
HTML5에서는 NAV 요소를 이용해서 내비게이션을 만들 수 있다.
위의 예에서는 NAV를 header 섹션에서 사용했는데 header 뿐만 아니라 다른 곳에서 사용할 수도 있다.
<nav>
<ul>
<li><a href="./#>Home</a></li>
<li><a href="./#>Portfolio</a></li>
<li><a href="./#>About</a></li>
<li><a href="./#>Contact</a></li>
</ul>
</nav>
ASIDE
새로운 요소인 aside는 문서의 주요 부분을 표시하고 남는 콘텐츠를 표시할 때 사용한다.
보통 주 콘텐츠 옆의 사이드바를 정의한다.
아래의 예제는 aside 요소를 이용해 웹 사이트의 '특집' 섹션을 구성한 것이다. 특집 섹션은 페이지의 콘텐츠이기도 하면서 실제 내용의 흐름에서 벗어나 한쪽에 위치하게 된다.
<aside>
<p> 이 부분에는 aside 요소를 이용한 특집 섹션 내용이 표시된다. </p>
</aside>
ARTICLE
ARTICLE 요소는 페이지의 실제 내용을 표현하는 요소로, 그 안에 또다른 콘텐츠를 포함할 수도 있다.
포럼의 포스트나 신문기사, 잡지 기사 등, 블로그 항목, 사용자가 등록한 코멘트, 또다른 독립적인 콘텐츠 항목들이 모두 해당된다.
article 요소가 다른 article 요소를 포함할 수도 있는데, 안에 있는 article 요소는 원칙적으로 바깥에 있는 article의 콘텐츠와 관련되어 있어야 한다. 예를 들어, 블로그 항목에 대한 article 요소 안에 사용자가 등록한 코멘트에 대한 article 요소를 포함할 수 있다.
article 요소 안에 header와 footer 요소를 사용해서 기사(article) 안에 콘텐츠를 구분할 수 있다.
<article>
<header>
<h2>Article Title</he>
<p><time pubdate datetime="2010-3-09T14:28-08:00"></time></p>
</header>
<p>이것은 header나 footer가 아닌 기사의 메인 콘텐츠이다. </p>
<footer>
<a href="./#">Show Comments</a>
</footer>
</article>
FIGURE
figure 요소를 사용하면 콘텐츠 흐름에서 요소를 분리할 수 있고 필요할 경우 캡션을 붙일 수도 있다.
<figure>
<img src="./figure.jpg" alt="figure image" />
<figcaption> This is a figure</figcaption>
</figure>
HGROUP
hgroup 요소를 사용하면 머리말 태그(h1~h6)를 그룹으로 묶을 수 있다.
페이지 안에서 머리말 태그를 여러 단계에 걸쳐 사용했을 경우 한곳에 정리해 놓을 수 있다.
<hgroup>
<h1>메인 타이틀</h1>
<h2>서브 타이틀</h2>
</hgroup>
SECTION
section 요소를 사용하면 콘텐트를 섹션별로 나눌 수 있다.
언제 article을 사용할지, 일반적인 div 태그를 사용할지를 알고 있어야 하기 때문에 복잡한 일이긴 하다.
<article>
<hgroup>
<h1>메인 타이틀</h1>
<h2>서브 타이틀</h2>
</hgroup>
<p>메인 섹션에 대한 설명 </p>
<section>
<h1>카테고리1</h1>
<p>카테고리1에 대한 설명</p1>
</section>
<section>
<h1>카테고리2</h1>
<p>카테고리2에 대한 설명</p1>
</section>
</article>
ADDRESS
address 요소는 연락처 정보에 사용한다. 사이트 전체 뿐만 아니라 페이지 별로, 또는 노드별로 사용할 수 있다.
이 태그는 실제 주소일 수도 있고 또다른 정보일 수도 있다.
<address>
<a href="./#">관리자</a>,
<a href="./#">Contact Us</a>
</address>
FOOTER
footer 요소는 특별히 콘텐츠 섹션의 하단에 정보를 표시하려고 할 때 사용한다.
이 태그는 사이트의 메인 하단 뿐만 아니라 기사의 하단에 사용할 수도 있다.
<article>
<header>
<h1>포스트 제목</h1>
</header>
<p> 포스트 내용 </p>
<footer>
<p> 코멘트 : </p>
</footer>
</article>
여기까지의 내용을 중심으로 아래 사이트의 소스를 살펴보기 바란다.
|
이 사이트는 HTML5와 CSS3로 만들어진 사이트로 <link> 태그와 <script> 태그를 제외하면 소스가 간단해져서 살펴보기 쉬울 것이다.
[출처] http://bubin.tistory.com/entry/HTML5-의-새로운-요소들
|
|
▣ ONE WAY, JESUS! [agapeuni™] - 2010년 05월 29일 ▣
|
|
다른 블로그 및 홈페이지에 게재할 경우에는 출처를 밝혀 주세요. *^^*
|
'모바일웹' 카테고리의 다른 글
| ★ html5 모바일웹 ★ 모바일 환경 HTML5로 급선회 (0) | 2011.05.10 |
|---|---|
| ★ html5 모바일웹 ★ HTML 5 모든것 (0) | 2011.05.10 |
| ★ html5 모바일웹 ★ [HTML5] HTML5 Guide aka 실전 HTML5 가이드 pdf (0) | 2011.05.10 |
| ★ html5 모바일웹 ★ HTML5 (0) | 2011.05.10 |
| ★ html5 모바일웹 ★ "탈옥없이 아이폰 앱 설치하자"…HTML5 기반 사설 앱스토어 등장 (0) | 2011.05.10 |
