HTML5 section, header, footer, nav 예시

Jmnote (토론 | 기여)님의 2014년 8월 1일 (금) 00:34 판
HTML5 header
HTML5 헤더
HTML5 footer
HTML5 푸터
HTML5 nav
HTML5 내비게이션

1 개요

  • header, footer: 페이지 또는 섹션의 상부와 하부
  • nav: 웹사이트 내비게이션. 메뉴같이 주요 내비게이션에만 사용.
  • 예제: http://jmnote.com/html5/header.php

2 소스 코드

<!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="/ules/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>

3 같이 보기

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}