티스토리 뷰

WEB2.0/웹표준

HTML5로 문서의 구조 만들기

나를찾는아이 2010. 6. 18. 13:18
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 마크업 예제


<!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 more
«   2024/04   »
일 월 화 수 목 금 토
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
글 보관함