티스토리 뷰
728x90
반응형
HTML5에는 문서의 구조를 만드는 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 마크업 예제
위 코드를 보시면 알 수 있듯이
우리가 구조화를 할때 쓰는 div 태그가 상당히 많이 줄었음을 알수 있습니다.
이로써 코드를 이해하기에 더욱 쉬워졌으며
중첩된 div를 사용할때 발생 했던 실수들(닫기 태그 삭제 등)을 줄일 수 있습니다.
이 태그들을 사용함으로써 구조를 잡을때 무심코 쓰던 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를 사용할때 발생 했던 실수들(닫기 태그 삭제 등)을 줄일 수 있습니다.
728x90
반응형
'WEB2.0 > 웹표준' 카테고리의 다른 글
HTML5의 새로운 태그를 IE에서도 사용하는 방법 (0) | 2010.06.20 |
---|---|
html5 브라우저 호환 준비하기 (0) | 2010.06.19 |
HTML5 시작하기 (0) | 2010.06.17 |
프레임셋 사용시 가로 스크롤바 나타나는 현상 (0) | 2010.06.06 |
프레임셋 제대로 사용하기 (0) | 2010.06.04 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 모바일
- 벤처
- Apple
- 스마트폰
- 게임
- 웹표준
- 자바스크립트
- 공모전
- 앱
- CSS
- android
- 경진대회
- 아이디어
- iPhone
- 구글
- JavaScript
- AWS
- 애플
- 대학생
- 소프트웨어
- 안드로이드
- 트위터
- php
- 창업
- 앱스토어
- 네이버
- 어플리케이션
- 아이폰
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
글 보관함