[퍼블]html5의 semantic 태그 활용방법

HTML5에서 시맨틱 태그가 도입된 이유는 웹 콘텐츠의 의미와 구조를 더 명확하게 정의하고 검색 엔진, 웹 브라우저, 스크린 리더 등의 사용자 에이전트가 콘텐츠를 더 잘 이해하고 해석할 수 있도록 하기 위함입니다. 명시적인 시맨틱 마크업을 사용하면 웹 페이지의 구조가 더 의미 있는 방식으로 표현되며, 이는 웹 접근성, SEO(Search Engine Optimization), 콘텐츠 분석, 미래 호환성 등 여러 가지 이점을 제공합니다.

출처: w3school.com

• header, footer : 웹 페이지의 머리말과 꼬리말을 정의하기 위해 도입되었습니다. 이러한 태그를 사용하면 웹 페이지의 주요 제목과 페이지 하단의 저작권 정보 또는 연락처와 같은 내용을 명확하게 구분할 수 있습니다.
• nav : 주요 탐색 링크와 메뉴를 감싸기 위해 사용됩니다. 이것은 검색 엔진이 중요한 탐색 부분을 식별하고 사용자 에이전트가 탐색 메뉴를 인식하는 데 도움이 됩니다.
• section : 문서의 섹션을 나타내며, 이 섹션 안에서 header와 footer를 사용하여 섹션의 제목과 부제목을 정의할 수 있습니다.
• article : 독립적으로 구별할 수 있는 콘텐츠 단위를 정의합니다. 블로그 게시물, 뉴스 기사, 포럼 게시물과 같이 다른 곳에서도 독립적으로 사용할 수 있는 콘텐츠를 감싸는 데 사용됩니다.
• aside : 주요 콘텐츠와 관련이 있지만 주 콘텐츠와는 독립적인 정보를 나타냅니다. 사이드바, 광고, 링크 목록 등을 표현하는 데 유용합니다.

    <div class="containter">
        <header>header</header>
        <nav>nav</nav>
        <div class="box1">
            <section>section</section>
            <aside>aside</aside>
            <article>article</article>
        </div>
        <footer>footer</footer>
    </div>

 

 

.containter{
    width: 1000px;
    border: 1px solid red;
    margin: auto;
}

header{
    text-align: center;
    border: 1px solid;
}
nav{
    text-align: center; 
    border: 1px solid;
}

.box1{
    border: 1px solid red;
    overflow: hidden;
}

section{
    width: 70%;
    text-align: center;
    border: 1px solid red;
    float: left;
    height: 50px;
}
aside{
    width: 29%;
    text-align: center;
    border: 1px solid red;
    float: right;
    box-sizing: border-box;
    height: 100px;
}

article{
    width: 70%;
    text-align: center;
    border: 1px solid red;
    float: left;
    height: 50px;
}
footer{
    text-align: center;
}