HTML5 문서의 구조
Html5 2011. 3. 30. 11:24HTML5에는 문서의 구조를 만드는 markup에 있어서 유용하고 흥미로운 태그들이 추가되었습니다.
이 태그들을 사용함으로써 구조를 잡을때 무심코 쓰던 div를 줄이고, 보다 명확하게 구조화할수 있습니다.
<section>
section은 콘텐츠를 그룹핑할때 쓰입니다.
section안에 section이 존재할수 있기 때문에 중첩해서 사용이 가능합니다.
<header>
section의 헤더에 해당하는 콘텐츠를 마크업할때 쓰입니다.
우리가 보통 <div id="header">라고 쓰는 것을 대체할 수도 있고
<section> 안에서 <header>를 사용함으로써
section 콘텐츠의 header 콘텐츠 라는 것을 표현 할 수도 있습니다.
<footer>
우리가 <div id="footer">라고 사용하는 것을 대체 합니다.
copyright나, 회사주소와 같은 정보들이 포함되는 경우가 많지요.
<nav>
nav는 navigation의 줄임말입니다.
네비게이션 메뉴를 나타낼때 쓰입니다.
<article>
독립적인 글들을 나타낼때 쓰입니다. 블로그의 경우 각 포스팅을 표현할때 흔히 쓸 수 있는 태그 입니다.
<aside>
콘텐츠와 관계있는 부가 정보들을 표시할때 유용한 태그입니다.
우리가 흔히 사이드바 라고 표현하는 콘텐츠들을 담기에도 유용합니다.
HTML5 structure 마크업 예제
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>html5</title>
</head>
<body>
<header>
<h1><a href="#">HTML5</a></h1>
</header>
<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
</ul>
</nav>
<section>
<article>
포스팅1
</article>
<article>
포스팅2
</article>
<article>
포스팅3
</article>
</section>
<aside>
<div>관련글</div>
<ul>
<li><a href="#">관련글1</a></li>
<li><a href="#">관련글2</a></li>
<li><a href="#">관련글3</a></li>
<li><a href="#">관련글4</a></li>
</ul>
</aside>
<footer>
<p>Copyright © 2010 All Rights</p>
</footer>
</body>
</html>위 코드를 보시면 알 수 있듯이
우리가 구조화를 할때 쓰는 div 태그가 상당히 많이 줄었음을 알수 있습니다.
이로써 코드를 이해하기에 더욱 쉬워졌으며
중첩된 div를 사용할때 발생 했던 실수들(닫기 태그 삭제 등)을 줄일 수 있습니다.
출처: 나를찾는아이
http://trend21c.tistory.com/911
'Html5' 카테고리의 다른 글
| iframe 사용 (0) | 2011.04.05 |
|---|---|
| HTML5의 새로운 태그를 IE에서도 사용하는 방법 (0) | 2011.03.30 |
| html5 브라우저 호환 준비하기 (0) | 2011.03.30 |
| HTML5 시작하기 (0) | 2011.03.30 |
| IE8이하 버전에서 HTML5 사용하기 (0) | 2011.03.30 |