[html] 시멘틱 태그

태그	설명
header	사이트의 제목과 로고, 검색 창 등이 위치
nav	웹 문서 내의 메뉴 등에 사용된다.  메인페이지 - 상단주메뉴 / 서브페이지 - 상단주메뉴 또는 사이드, 중간 메뉴
footer	웹문서 하단 영역으로, 정책, 저작자나 저작권 정보 등에 사용된다.
main	본문 묶음 (한페이지에 한번만 가능)
section	같은 주제에 대한 내용의 묶음
article	작은 컨텐츠의 독립적 영역
aside	컨텐츠 외의 영역

 

 

* 예시 이미지

section / article 예시

aside 예시

 

 

* 예시 코드

 <!-- 전체구조 영역 div-->
    <div>
        <header>
            <div>
                <h1><a href="#">
                    <img src="https://via.placeholder.com/100x50" alt="로고에 있는 글자">
                </a></h1>
                <!-- 로고 -->

                <nav>
                    <ul>
                        <li><a href="#">MainMenu1</a></li>
                        <li><a href="#">MainMenu2</a></li>
                        <li><a href="#">MainMenu3</a></li>
                        <li><a href="#">MainMenu4</a></li>
                        <li><a href="#">MainMenu5</a></li>
                    </ul>
                </nav>
                <!-- 주요 메뉴 -->
                
            </div>
            <!-- 실제 컨텐츠 영역 inner -->
        </header>
        <!-- 헤더 -->
    
        <section>
            <h2>비주얼 광고 영역</h2>
        </section>
        <!-- 비주얼 영역 -->

        <main>
            <section>
                <div>
                    <div>
                        <h2>타이틀1</h2>
                    </div>
                    <!-- 안쪽 내부 컨텐츠 -->
                </div>
                <!-- 컨텐츠1 영역 -->

                <section>
                    <div>
                        <h2>타이틀2</h2>
                    </div>  
                </section>
                 <!--  컨텐츠2 영역 -->

                 <section>
                    <div>
                        <h2>타이틀3</h2>
                    </div>  
                </section>
                 <!--  컨텐츠3 영역 -->

                 <div>
                    <div>
                        <h2>타이틀4</h2>
                    </div>
                 </div>
                 <!-- 컨텐츠4 영역 -->

            </section>
            <!-- 전체 컨텐츠의 묶음 -->
        </main>
        <!-- 본문 -->
        
        <aside>
            <div>
                <h2>사이트 맵 : 은행, 증권사이트 참고</h2>
            </div>
        </aside>
        <!-- 컨텐츠 외 영역 -->

        <footer>
            <div>
                <h2>하단로고</h2>
                <p>
                    <a href="#">정책1</a>
                    <a href="#">정책2</a>
                    <a href="#">정책3</a>
                    <a href="#">정책4</a>
                </p>
                <p>
                    <span>나누는 영역</span>
                    <span>나누는 영역</span>
                    <span>나누는 영역</span>
                    <span>나누는 영역</span>
                </p>
                <p>
                    &copy;저작권 
                </p>
            </div>
        </footer>

    </div>