기술 창고/HTML

[HTML] 시멘틱 (semantic) 구분

JayEsEichi 2023. 3. 7. 01:20
728x90
반응형
SMALL
<!DOCTYPE html>
<html lang="ko">
    <head> 
        <meta charset="utf-8"> 
        <title>시멘틱 구분</title> 
    </head>
    <body> 
        <div id="wrapper"> 
            <header>
                <h1>Logo</h1>
                <h2>menu</h2>
            </header>
            <hr> <!-- by the way (구분선) -->
            <main> 
                <aside><h2>Sub Menu</h2></aside>
                <hr>
                <section>
                    <h2>Main Menu</h2>
                    <article>
                        <h3>article title</h3>
                        <p>article contents</p>
                    </article>
                    <article>    
                        <h3>article title</h3>
                        <p>article contents</p>
                    </article>
                    <article>
                        <h3>article title</h3>
                        <p>article contents</p>
                    </article>
                </section>
            </main>
            <hr> 
            <footer> 
                <h2>footer</h2>
            </footer>
        </div>
    </body>
</html>

<!--
    # <hr> = 구분선을 넣어주는 태그
-->
  • <hr> : 구분해주는 구분선 태그.

 

# 실행한 결과

 

728x90
반응형
LIST