시맨틱 레이아웃 ( Semantic layout )

semantic


  • 시맨틱 (semantic)은 '의미론적'이란 뜻을 가지고있다

  • 각 태그가 어떤 의미로 쓰이는지 태그만 보고 알수있다 ( 이미지 참조 )

  • 구글의 웹크롤러가 해당 페이지를 조금 더 쉽게 이해할수있으므로 SEO에 이점이 있다

  • <header>, <nav>, <article>, <section>, <footer>, <main> 등이 존재


예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>블로그 제목</title>
</head>
<body>
    <!-- <header>: 페이지의 머리글 부분으로, 로고, 제목, 내비게이션 링크 등을 포함 -->
    <header>
        <h1>블로그 제목</h1>
        <nav>
            <ul>
                <li><a href="#home">홈</a></li>
                <li><a href="#about">소개</a></li>
                <li><a href="#contact">문의</a></li>
            </ul>
        </nav>
    </header>

    <!-- <main>: 문서의 주요 콘텐츠 영역으로 하나만 존재해야함 -->
    <main>
        <!-- <article>: 독립적으로 읽을 수 있는 콘텐츠, 블로그 글 하나 -->
        <article>
            <h2>첫 번째 블로그 글 제목</h2>
            <!-- <section>: 문서 내의 구획을 나타내며, 주제를 구분 -->
            <section>
                <h3>서론</h3>
                <p>서론 내용...</p>
            </section>
            <section>
                <h3>본론</h3>
                <p>본론 내용...</p>
            </section>
        </article>

        <article>
            <h2>두 번째 블로그 글 제목</h2>
            <section>
                <h3>서론</h3>
                <p>서론 내용...</p>
            </section>
        </article>
    </main>

    <!-- <footer>: 페이지의 바닥글 부분으로, 저작권 정보나 추가적인 링크 포함 -->
    <footer>
        <p>&copy; 2024 블로그 이름. All rights reserved.</p>
    </footer>
</body>
</html>



article과 section의 차이

  • div와 같은 블록 속성을 가지고 있기 때문에 div로 대치해도 됨

  • 두 요소 다 콘텐츠를 구분하는 데 사용되며 서로 바꿔서 사용 가능

  • article은 독립적 사용 가능

  • section은 관계가 있을 법한 요소들을 분리할때 사용한다

참조

이미지참조

article과 section의 차이

Jun 7, 2024 Views 86