섹션

HTML5에서 웹 페이지의 구조를 논리적으로 나누고 의미를 부여하기 위해 다양한 섹션 태그가 도입되었습니다. 이러한 섹션 태그들은 웹 페이지의 가독성을 높이고, 검색 엔진 최적화(SEO)에도 긍정적인 영향을 미칩니다.

<article>
  <header>
    <h1>제목</h1>
    <time datetime="2023-11-23">2023년 11월 23일</time>
  </header>
  <main>
    <h2>주요 콘텐츠</h2>
    <p>본문 내용</p>
    <img src="image.jpg" alt="이미지 설명">
  </main>
  <footer>
    <p>작성자: 홍길동</p>
  </footer>
</article>

section

문서의 독립적인 섹션을 나타냅니다. 주제별로 내용을 구분할 때 사용합니다.

<section>
  <h2>첫 번째 섹션</h2>
  <p>이 섹션은 첫 번째 내용을 담고 있습니다.</p>
</section>

article

독립적인 콘텐츠 블록을 나타냅니다. 블로그 게시글, 뉴스 기사 등과 같이 재사용 가능한 콘텐츠에 사용합니다.

<article>
  <h2>블로그 게시글</h2>
  <p>오늘의 날씨는 맑습니다.</p>
</article>

nav

네비게이션 링크를 모아놓은 섹션을 나타냅니다.

<nav>
  <ul>
    <li><a href="#">홈</a></li>
    <li><a href="#">소개</a></li>
    <li><a href="#">문의</a></li>
  </ul>
</nav>

aside

본문과 관련된 부가적인 정보를 담는 사이드바를 나타냅니다.

<aside>
  <h3>광고</h3>
  <img src="ad.jpg" alt="광고 이미지">
</aside>

header

섹션의 헤더 부분을 나타냅니다. 제목, 검색창 등을 포함할 수 있습니다.

<header>
  <h1>웹 사이트 제목</h1>
  <nav>
    </nav>
</header>

main

HTML5에서 도입된 태그로, HTML 문서의 주요 콘텐츠를 감싸는 역할을 합니다.

유일성: 하나의 HTML 문서에 main 태그는 하나만 사용해야 합니다.
위치: body 태그 안에 위치해야 합니다.
내용: main 태그 안에는 웹 페이지의 주요 내용만 포함해야 합니다.
헤더와 푸터: header와 footer 태그는 main 태그의 외부에 위치해야 합니다.

footer

<footer>
  <p>&copy; 2023 모든 권리 보유</p>
</footer>

2.3 KiB Raw Permalink Blame History

섹션