웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)
html5. outline.hgroup 본문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML5 - outline markup</title>
</head>
<body>
<h1>body section hadline</h1>
<section>
<h1>section headline - out</h1>
<section>
<h1>section headline - in 1</h1>
<h1>section headline - in 1</h1>
<h1>section headline - in 1</h1>
</section>
<section>
<h1>section headline - in 1</h1>
<h2>section headline - in 2</h2>
<h2>section headline - in 2</h2>
<h2>section headline - in 2</h2>
<h3>section headline - in 3</h3>
<h3>section headline - in 3</h3>
<h4>section headline - in 4</h4>
<h5>section headline - in 5</h5>
<h6>section headline - in 6</h6>
</section>
</section>
<!--
제목이 섹션 내에 하나 이상일 때
눈에 보이지 않는(암묵적으로) 별도의 섹션이 추가
1. body section headline
1. body section headline - sub
2. section#page-wrap headline
-->
<h1>body section headline</h1>
<!--
같은 레벨(level)의 제목이 연달아 사용될 경우,
같은 레벨의 암묵적인 섹션이 추가됩니다.
-->
<section>
<hgroup>
<h1>section inner headline 1 (main)</h1>
<h2>section inner headline 2 (sub)</h2>
</hgroup>
<!-- </section> -->
<!-- <section> -->
<h1>section inner headline 1</h1>
<!-- </section> -->
<!-- <section> -->
<h1>section inner headline 1</h1>
</section>
<!--
다른 레벨의 제목이 연달아 사용될 경우,
하위 레벨의 암묵적인 섹션이 추가됩니다.
-->
<section class="before" id="page-wrap">
<h1>section#page-wrap headline1</h1>
<h2>section#page-wrap headline2</h2>
<h3>section#page-wrap headline3</h3>
</section>
<!-- ↓ HTML5에서 암묵적으로 색션 생성 변경된 구조 -->
<section class="after" id="page-wrap">
<h1>section#page-wrap headline1</h1>
<!-- <section> -->
<h2>section#page-wrap headline2</h2>
<!-- <section> -->
<h3>section#page-wrap headline3</h3>
<!-- </section> -->
<!-- </section> -->
</section>
</body>
</html>
'html5' 카테고리의 다른 글
| HTML5 - section root (0) | 2011.11.10 |
|---|---|
| HTML5 Section (0) | 2011.11.10 |
| HTML5 - hgroup (0) | 2011.11.10 |
| HTML5 - nav (0) | 2011.11.10 |
| HTML5 - header (0) | 2011.11.10 |