HTML5 기본 구조

날짜:
  HTML5 기본 구조
<!DOCTYPE HTML>
<html>
<head>
    <title>HTML5 기본 구조</title>
    <meta charset="UTF-8" />
</head>
<body>
    <header></header>
    <nav></nav>
    <section></section>
    <aside></aside>
    <footer></footer>
</body>
</html>


  HTML5 새로운 시맨틱 요소
HTML5에서는 명확하게 페이지의 부분을 정의하기 위해 새로운 시맨틱 요소들이 추가 되었다.

예) 기존의 코드에서는 <div id="nav">, <div class="header">, <div id="footer">등으로 표현 하였던 것을 아래 그림과 같이 자주 사용하는 것들에 대해 시맨틱 요소를 추가 함.
HTML
HTML, HTML5 비교
HTML5
 

1. <header>
- 소개나 네비게이션 기능들의 묶음을 나타냄.
보통 문서나 <section>의 최상단에 나타나지만, 꼭 그래야 할 필요는 없으며 여러번 사용 가능하다.
  또, 한 섹션의 목차나 검색폼, 관련 로고등을 감싸는 용도로 사용 가능.

사용예)
<header>
    <h1>웹 페이지 로고</h1>
</header>


2. <nav>
- 문서의 글로벌 네비게이션이나 사이드 네비게이션등 페이지의 이동을 위한 네비게이션을 위해 구성된 섹션을 나타냄.

  페이지 안에 있는 모든 링크의 그룹이 <nav>로 기술될 필요는 없으며 주요 네비게이션 링크들만 묶어주는 것이 좋다.

사용예)
<nav>
    <ul>
        <li>내용1</li>
        <li>내용2</li>
    </ul>
</nav>


3. <section>
- 테마별로 연관된 콘텐츠를 한데 묶어서 더 큰 논리적인 단위를 형성할 수 있게 도와주며 하나의 페이지 안에서 주제가 다른 영역을 구분 또는 하나의 글을 부분으로 나누기도 함. 주로 제목과(h) 함께 사용.

  스타일링이나 스크립트를 위해서 감싸는 요소가 필요 하다면 문서 구조상 특별한 의미가 없는 <div>를 사용 한다.

  <section>은 연관된 콘텐츠를 위해 사용하도록 하자.

사용예)
<article>
    <h1>제목</h1>
    <section>
        <h1>소제목1</h1>
        <p>내용<p>
    </section>
    <section>
        <h1>소제목2</h1>
        <p>내용<p>
    </section>
</article>
하나의 섹션 안에서는 그 섹션이 전체 문서 구조에서 가지는 단계와 상관없이 <h1>을 사용할 수 있다.


4. <article>
- 문서, 페이지, 어플리케이션, 사이트 안에 들어가는 독립적으로 구성할 수 있는 컴포넌트로 별도로 배포하거나 재사용 하기 위한 구조이다. <article>은 완전히 떼어내 다른 사이트에 붙여도 그 의미를 사용자가 알 수 있는 콘텐츠를 담으면 된다.

사용예1)
<section>
    <article>
        <h1>제목</h1>
        <p>내용</p>
    </article>
</section>

<article> 요소안에 <article> 요소가 들어갈 경우, 밖의 <article> 요소의 내용과 안쪽의 <article> 요소의 내용이 관련이 있는 내용이라는 것을 의미.

사용예2)
<article>
    <header>
        <h1>HTML5 구조</h1>
    </header>
    <p>본문 내용</p>
    <footer>Footer 내용</footer>
    <article> <!-- 코멘트 시작 -->
        <header>
        구글:<a href="http://www.google.com">google</a>
        네이버:<a href="http://www.naver.com">naver</a>
        </header>
        <p>코멘트 내용</p>
    </article> <!-- 코멘트 끝 -->
</article>


5. <aside>
- 주된 본문 콘텐츠 흐름과 관련없는 인접한 콘텐츠에 사용. 관련 사이트 링크나 광고, <nav> 요소의 그룹, 

  메인 콘텐츠와 별도의 내용의 콘텐츠에 사용.

사용예)
<aside>
    <h2>부가내용 / 광고</h2>
</aside>


6. <footer>
- 페이지를 만든 사람, 저작권 정보, 연관된 콘텐츠에 대한 링크등등에 쓰인다.

사용예)
<footer>
    <adress>z@gmail.com</adress>
</footer>