티스토리 뷰

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
반응형
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/11   »
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
글 보관함