HTML5 - Semantic Element

기존 HTML과 HTML5의 가장 큰 차이는 다음과 같습니다. 

1. 새로운 구조요소 추가(시멘틱마크업이 세분화됨)

2. 자바스크립트가 공식 스크립트 언어가 됨

3. canvas 그림그리기 기능추가

4. 하드웨어 컨트롤 기능추가

그 중에서도 중요한 건! 바로 시멘틱(Semantic)마크업입니다.

그림과 표로 한 번 살펴보겠습니다.

■ HTML5 레이아웃 요소

- header : 헤딩요소

- main : 웹 사이트 주요 콘텐츠

- footer : 푸터요소

- nav : 메뉴요소, gnb, lnb

- section : 콘텐츠를 묶는 의미적 그룹요소

- article : 독립적으로 배포/재사용이 가능한 요소 => 뉴스, 게시물

- sidebar : 주요콘텐츠와 내용이 관련이 없으며 분리가 가능한 요소 : 퀵메뉴

■ 기존 구조와 HTML5 구조 비교

<!-- HTML5 이전 레이아웃 구조 -->
<div id="wrap">
    <div id="header">header</div><!-- 헤더 -->
    <div id="menu">
        <h2>전체메뉴</h2>
        <ul class="gnb">
            <li>대메뉴1</li>
            <li>대메뉴2</li>
            <li>대메뉴3</li>
        </ul>
    </div><!-- 메뉴 -->    
    <div id="content">
        <h2>제목</h2>
        <p>내용</p>
    </div><!-- 내용 -->
    <div id="footer">footer</div><!-- 푸터 -->
</div><!-- wrap-->
 
<!-- HTML5 이후 레이아웃 구조-->/
<div id="html5_wrap">
    <header>header</header><!-- 헤더 -->
    <nav>
        <h2>전체메뉴</h2>
        <ul>
            <li>대메뉴1</li>
            <li>대메뉴2</li>
            <li>대메뉴3</li>
        </ul>
    </nav><!-- 메뉴 -->
    <section>
        <article>
            <h2>제목</h2>
            <p>내용</p>
        </article>
    </section><!-- 내용 -->        
    <footer>footer</footer><!-- 푸터 -->
</div><!-- html5_wrap -->

기존의 구조보다 태그 자체로 의미를 명확하게 전달을 하는 것 같아 보입니다.