HTML5 section, header, footer, nav 예시

1 개요[ | ]

HTML5 section, header, footer, nav 예시

header, footer: 페이지 또는 섹션의 상부와 하부
nav: 웹사이트 내비게이션. 메뉴같이 주요 내비게이션에만 사용.
의미상의 태그이며, 기본 스타일은 모두 div와 동일하다.

2 소스 코드[ | ]

html

Copy

<!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">example.com</a></strong></address>
  </footer>
</body>

3 같이 보기[ | ]