섹션

콘텐츠 섹션 요소를 사용하면 문서 콘텐츠를 논리적 조각으로 구성할 수 있습니다. 섹션 요소를 사용하여 머리글 및 바닥글 탐색, 콘텐츠 섹션을 식별하는 머리글 요소를 포함하여 페이지 콘텐츠에 대한 광범위한 개요를 만듭니다. 이 태그들은 HTML5에서 주로 사용되며, 시맨틱 마크업(semantic markup)을 통해 문서 구조를 명확히 정의하는 데 유용합니다.

대부분의 시맨틱 태그는 고유한 속성을 가지지 않고, 전역 속성(id, class, style, lang 등)을 주로 사용합니다.

이 태그들은 주로 구조적 의미를 제공하며, CSS로 스타일을, JavaScript로 동작을 추가하는 것이 일반적입니다. 시맨틱 태그는 스크린 리더와 검색 엔진이 문서 구조를 더 잘 이해하도록 돕습니다. article 안에 header, footer, section 등을 중첩하여 사용할 수 있습니다.

h1 ~ h6

<h1>가장 중요한 제목</h1>
<h2>부제목</h2>
<h3>소제목</h3>
<h4>더 작은 제목</h4>
<h5>아주 작은 제목</h5>
<h6>가장 작은 제목</h6>

설명: 계층적 제목 구조를 보여줌.

header

<header>
  <h1>My Website</h1>
  <nav>
    <a href="#home">Home</a> | <a href="#about">About</a>
  </nav>
</header>

설명: 페이지 상단에 로고와 내비게이션 포함.

footer

<footer>
  <p>&copy; 2025 My Website. All rights reserved.</p>
</footer>

설명: 페이지 하단에 저작권 정보 표시.

main

<main>
  <h1>메인 콘텐츠</h1>
  <p>이곳은 문서의 주요 내용을 담고 있습니다.</p>
</main>

설명: 문서의 핵심 콘텐츠를 정의.

article

<article>
  <h2>최신 기술 트렌드</h2>
  <p>AI와 머신러닝이 2025년을 지배할 것입니다.</p>
</article>

설명: 독립적인 블로그 포스트나 기사 콘텐츠 정의.

nav

<nav>
  <ul>
    <li><a href="#home">홈</a></li>
    <li><a href="#services">서비스</a></li>
    <li><a href="#contact">연락처</a></li>
  </ul>
</nav>

설명: 내비게이션 메뉴를 구조화.

aside

<aside>
  <h3>관련 링크</h3>
  <ul>
    <li><a href="#">AI 소개</a></li>
    <li><a href="#">머신러닝 가이드</a></li>
  </ul>
</aside>

설명: 주요 콘텐츠 옆에 표시될 사이드바 콘텐츠.

address

<address>
  작성자: <a href="mailto:example@email.com">example@email.com</a><br>
  주소: 서울특별시 강남구<br>
  전화: 123-456-7890
</address>

설명: 연락처 정보를 구조화하여 표시.

section

<section>
  <h2>제품 소개</h2>
  <p>우리의 제품은 혁신적이고 사용자 친화적입니다.</p>
</section>

설명: 문서 내 특정 주제의 섹션 정의.

2.8 KiB Raw Blame History

섹션