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>