웹 퍼블리싱/HTML5

HTML 콘텐츠 영역 구분 (feat. <article> <selection> <div> 차이)

욕심많은 햄톨 2023. 12. 20. 17:36

 

✏️<article> <selection> <div> 차이

<article>은 독립적인(재사용 가능한) 영역을 설정. 제목 태그(<h1>..)를 포함하여 식별한다. ex)기사, 블로그

<selection>은 제목 태그(<h1>..)를 포함하여 식별.

<div>는 가장 무의미. 스타일을 적용시키기 위한 용도.

 

<article>과 <selection>은 부모 자식 관계가 정해져 있지 않기 때문에 이미지와 반대로 <article> 안에 <selection>이 들어갈 수 있다.

 

예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>콘텐츠 구분 예제</title>
    <link rel="stylesheet" href="./main.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li>메뉴1</li>
                <li>메뉴2</li>
                <li>메뉴3</li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h1>Section</h1>
            <article>
                <h2>Article</h2>
                <p>Contents...</p>
            </article>
            <article>
                <h2>Article2</h2>
                <p>Contents...</p>
            </article>
            <article>
                <h2>Article3</h2>
                <p>Contents...</p>
            </article>
        </section>
        <aside>
            Aside
        </aside>
    </main>

    <footer>
        <address>
            <a href="mailto:rachu970605@gmail.com">rachu970605@gmail.com</a>
            <a href="tel:+821012345678">010-1234-5678</a>
        </address>
    </footer>
</body>
</html>
728x90