[HTML] 구조화

과거시스템 : 레가시 시스템(legecy system)

• div,span 태그를 사용해서 공간분리
• 태그가 많아질수록 코드 복잡도 증가
• 복잡도 증가로 인한 코드 재사용 어려움

    <div id = "header">머리말</div>
    <div>메뉴</div>
    <div id = "content">본문</div>
    <div id = "footer">꼬리말</div>

현대 방식 :시멘틱 태그: header(머리말), nav(메뉴), section(본문), footer(꼬리말)

태그	설명
header	머리말(페이지 제목, 페이지 소개)
nav	하이퍼링크들을 모아 둔 네비게이션
aside	본문 흐름에 벗어나는 노트나 팁
section	문서의 장이나 절에 해당하는 내용
article	본문과 독립적인 콘텐츠 영역
footer	꼬리말(저자나 저작권 정보)

• 검색에 노출 잘됨
• 의미를 알 수 있는 태그 사용으로 코드 분석 용이
• 검색 최적화에 의한 명확한 정보 제공에 용이

<!-- 머리말 시작 -->
    <header>
        <h1>HTML5 기본</h1>
    </header>
    <!-- 머리말 끝 -->

    <!-- 메뉴 시작 -->
    <nav>
        <ul>
            <li><a href="#">메뉴 - 1</a></li>
            <li><a href="#">메뉴 - 2</a></li>
            <li><a href="#">메뉴 - 3</a></li>
        </ul>
    </nav>
    <!-- 메뉴 끝 -->
    
    <!-- 본문 시작 -->
    <!-- section(대 본문), article(소 본문) -->
    <section>
            <!--소본문시작 #1  -->
            <article>
                <h1>안녕하세요</h1>
                <p>그린컴퓨터아카데미입니다.</p>
            </article>
            <!--소본문 끝 #1  -->

            <!--소본문시작 #2  -->
            <article>
                <h1>안녕하세요2</h1>
                <p>그린컴퓨터아카데미입니다.2</p>
            </article>
            <!--소본문 끝 #2  -->
    </section>
    <!-- 본문 끝 -->

    <!-- 꼬리말 시작 -->
    <footer>
        <address>부산광역시 동래구</address>
    </footer>
    <!-- 꼬리말 끝 -->

• 위 코드와 같이 태그에 따라 분리가 명확해 코드를 분석하기 쉬움