capturing the miraculous world
HTML5 구조 관련 요소 알아보기 본문
* HTML5 구조 정의 예
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 구조 예제</title>
</head>
<body>
<header>
<!-- 제목과 로고 -->
<h1><img src="logo.gif"> 헤더 영역</h1>
<!-- 메뉴 -->
<nav>
<ul>
<li><a href="header.html">헤더란?</li>
<li><a href="section.html">섹션이란?</li>
</ul>
</nav>
</header>
<section>
<!-- 섹션 제목 -->
<h2>HTML5 구조 요소 종류</h2>
<!-- 내용 -->
<p>header, section, article, footer...</p>
</section>
<!-- article 은 독립된 콘텐츠를 정의할 때 사용한다. -->
<article>
<header>
<h1>독립된 콘텐츠 영역인 article</h1>
</header>
<section>
<h2>article 개념</h2>
<p>article이란 하나의 독립된...</p>
</section>
<section>
<h2>article 특징</h2>
<p>article 내에서는...</p>
</section>
</article>
<footer>
<address>서울시 강남구 삼성동 ☎ 02-0000-0000</address>
Copyrightⓒ 2012. All rights reserved.
</footer>
</body>
</html>
1. header
- 제목, 로고나 메뉴 등을 포함하는 영역입니다.
- section 내에 사용되어, 해당 section 영역의 제목 등을 포함하기도 합니다.
2. section
- 장, 절 등의 영역을 구분할 때 사용합니다.
- 콘텐츠를 구분하는 section 영역 안에는 제목을 의미하는 요소가 포함되어야 합니다.
3. article
- section과 달리 독립된 콘텐츠를 의미합니다.
예) 블로그의 포스트, 뉴스, 포스트의 답글 등
4. aside
- 사이드바, 광고 등 메인 콘텐츠와 관련이 적은 부가적인 콘텐츠를 포함하는 영역입니다.
<aside>
<h1>배너광고</h1>
<a href="http://www.***.com"><img src="banner.gif"></a>
</aside>
5. nav
- 주메뉴, 서브메뉴 등의 내비게이션을 마크업할 때 사용하며, 링크 항목을 포함합니다.
6. address
- 연락처 정보를 마크업할 때 사용하는 요소로, HTML5에서는 페이지 또는 포스트의 관리자, 저작자의 연락처 정보를 표시할 때 사용하도록 제시하고 있습니다.
7. footer
- 연락처, 저작권 등의 정보를 포함하는 영역입니다.
- 한 페이지 내에서 여러 번 사용이 가능하지만 footer 영역 내에 사용할 수는 없습니다.
* 다음 포스트 예정 : form 요소에서 추가된 HTML5 신규 요소.
'IT Tech. > HTML5' 카테고리의 다른 글
| HTML5 시작하기 (0) | 2012.02.02 |
|---|