hTML5 section, header, footer, nav 예시

HTML5 header element
HTML5 헤더

HTML5 footer element
HTML5 푸터

1 소스 코드

<!DOCTYPE html>
<meta charset="utf-8">
<title>헤더 요소</title>
<body>
  <header>
    <h1>페이지 헤더 h1</h1>
    <nav>
      <ul>
        <li><a href="menu1.php">메뉴1</a></li>
        <li><a href="menu2.php">메뉴2</a></li>
        <li><a href="menu3.php">메뉴3</a></li>
      </ul>
    </nav>
    <p>section 밖에 있으면 페이지(body)의 헤더.</p>
  </header>
  <section>
    <header>
      <hgroup>
        <h1>섹션 헤더 h1</h1>
        <h2>섹션 헤더 h2</h2>
      </hgroup>
      <p>섹션 안에 있으면 섹션의 헤더.</p>
    </header>
  </section>
  <footer>
    <ul>
      <li><a href="http://corp.jmnote.com">회사소개</a></li>
      <li><a href="rules/service.php">이용약관</a></li>
      <li><a href="rules/pirvacy.php">개인정보취급방침</a></li>
      <li><a href="rules/youthpolicy.php">청소년보호정책</a></li>
      <li><a href="http://help.jmnote.com">고객센터</a></li>
    </ul>
    <address>&copy; <strong><a href="http://corp.jmnote.com/" target="_blank">jmnote.com</a></strong></address>
  </footer>
</body>

2 예제

http://jmnote.com/html5/header.php

3 같이 보기

HTML5 섹션