실행 가능한 HTML 문서: section 태그

Q: section과 div는 무엇이 다른가요?

은 그 콘텐츠가 자체 제목을 가진 문서의 주제별 부분이라고 말해요. 는 아무것도 말하지 않는, 스타일이나 레이아웃을 위한 상자예요. CSS용 래퍼만 필요하다면 를 쓰세요.

Q: section과 article은 무엇이 다른가요?

은 블로그 글, 댓글, 상품 카드처럼 페이지 밖에서도 그 자체로 의미가 통하는 콘텐츠예요. 은 더 큰 것의 일부로, 그 맥락 안에서만 의미가 통해요. 그 부분만 따로 발행할 수 있는지 생각해 보세요. 그렇다면 article이에요.

section 태그의 용도

<section>은 한 가지 주제의 콘텐츠를 묶고, 그 주제의 이름을 붙이는 제목으로 시작해요. "Features", "Pricing", "FAQ"로 나뉜 랜딩 페이지가 교과서적인 예예요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sections</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    section { border: 2px solid #e5e7eb; border-radius: 8px; padding: 0 14px; margin-bottom: 10px; }
    section h2 { color: #2563eb; }
  </style>
</head>
<body>
  <h1>Acme Notes</h1>
  <section>
    <h2>Features</h2>
    <p>Sync, search and share your notes.</p>
  </section>
  <section>
    <h2>Pricing</h2>
    <p>Free for personal use.</p>
  </section>
  <section>
    <h2>FAQ</h2>
    <p>Answers to common questions.</p>
  </section>
</body>
</html>

각 section은 페이지의 한 장이고, 각 제목은 페이지 목차의 한 줄이에요. 다른 시맨틱 태그처럼 <section>에도 기본 스타일이 없어요. 테두리는 CSS에서 나와요.

section, article, div 차이

셋은 화면에서 똑같아 보여요. 다른 건 콘텐츠에 대해 무엇을 말하느냐예요.

요소	뜻	확인 질문
`<article>`	완결된 독립적인 내용	다른 사이트나 피드에 그것만 발행해도 의미가 통할까?
`<section>`	더 큰 전체의 주제별 부분	제목이 있거나 필요하고, 무언가의 한 장인가?
`<div>`	아무 뜻 없음: 스타일이나 레이아웃용 상자	CSS나 JavaScript만을 위해 있는가?

블로그 글, 포럼 댓글, 뉴스 기사, 상품 카드는 article이에요. "Features", "2장", "관련 상품"은 section이에요. 카드 세 개를 한 줄로 늘어놓는 flex 행은 div예요.

section 안의 article

둘은 양방향으로 중첩돼요. 여기서는 "Latest posts" section이 독립적인 article 여러 개를 담고 있어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Section of articles</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .grid { display: flex; gap: 10px; }
    article { flex: 1; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 12px; }
    article h3 { margin: 10px 0 4px; font-size: 16px; }
    article p { color: #6b7280; font-size: 14px; }
  </style>
</head>
<body>
  <section>
    <h2>Latest posts</h2>
    <div class="grid">
      <article>
        <h3>Flexbox in 5 minutes</h3>
        <p>Rows, columns and gaps.</p>
      </article>
      <article>
        <h3>CSS Grid basics</h3>
        <p>Two-dimensional layout.</p>
      </article>
      <article>
        <h3>Forms that work</h3>
        <p>Labels and validation.</p>
      </article>
    </div>
  </section>
</body>
</html>

<div class="grid">를 보세요. 카드를 한 줄로 배치하기 위해서만 있으니 div가 맞는 태그예요. 각 글이 그 자체로 독립적이라서 카드는 모두 article이에요.

article 안의 section

긴 글은 책의 장처럼 section으로 나눌 수 있어요. 제목 단계는 article 자체의 제목에서 이어져요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article with sections</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 2px solid #2563eb; border-radius: 8px; padding: 0 14px; }
    section { border-inline-start: 4px solid #16a34a; padding-inline-start: 10px; margin-bottom: 12px; }
    section h3 { margin: 4px 0; }
  </style>
</head>
<body>
  <article>
    <h2>A beginner's guide to bread</h2>
    <section>
      <h3>Ingredients</h3>
      <p>Flour, water, salt, yeast.</p>
    </section>
    <section>
      <h3>Method</h3>
      <p>Mix, knead, rise, bake.</p>
    </section>
  </article>
</body>
</html>

파란 상자가 article(가이드 전체)이고, 초록색 막대가 그 section들이에요. section에는 한 단계 아래 제목을 주세요. h2 article에는 h3 section이 들어가요.

이름이 붙은 section은 랜드마크가 돼요

스크린 리더는 특정 요소를 사용자가 건너뛰며 이동할 수 있는 랜드마크로 보여 줘요. <section>은 접근 가능한 이름이 있을 때만 region 랜드마크가 돼요. aria-labelledby로 그 제목을 가리키세요.

<section aria-labelledby="pricing-title">
  <h2 id="pricing-title">Pricing</h2>
  ...
</section>

모든 section이 아니라 사용자가 바로 가고 싶어 할 몇 개에만 이렇게 하세요. 랜드마크가 스무 개인 페이지는 하나도 없는 페이지만큼 훑어보기 어려워요. 이름 없는 section도 도움은 돼요. 제목이 스크린 리더의 제목 목록에 나오니까요.

section은 페이지 내 링크의 대상으로도 좋아요. id를 주면 href="#id"인 링크로 그곳에 이동할 수 있어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Jump links</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    section { min-height: 420px; border-top: 2px solid #e5e7eb; }
  </style>
</head>
<body>
  <p><a href="#faq">Jump to the FAQ</a></p>
  <section id="features" aria-labelledby="features-title">
    <h2 id="features-title">Features</h2>
  </section>
  <section id="faq" aria-labelledby="faq-title">
    <h2 id="faq-title">FAQ</h2>
    <p><a href="#features">Back to features</a></p>
  </section>
</body>
</html>

자주 하는 실수

<section>을 스타일용 래퍼로 씀. 제목도 주제도 없다면 <div>를 쓰세요. 각 레이아웃 태그가 어디에 맞는지는 시맨틱 HTML 페이지에서 보여 줘요.
블로그 글 하나를 <section>으로 감쌈. 그 자체로 독립적인 글은 <article>이에요.
제목 없는 section. 화면에서 숨긴 제목이라도 추가하거나, section이 맞는지 다시 생각해 보세요.
<main>을 <section>으로 바꿈. 페이지의 주요 콘텐츠는 <main>에 넣고, section은 그 안에 넣어요.
모든 section에 이름을 붙임. 랜드마크 목록이 짧게 유지되도록 중요한 section에만 aria-labelledby를 추가하세요.

자주 묻는 질문

HTML에서 section 태그란 무엇인가요?

<section>은 문서의 한 장이나 랜딩 페이지의 "Pricing" 부분처럼 한 가지 주제에 속한 콘텐츠를 묶어요. 보통은 이 섹션이 무엇에 관한 것인지 말해 주는 제목으로 시작해야 해요.

section과 div는 무엇이 다른가요?

<section>은 그 콘텐츠가 자체 제목을 가진 문서의 주제별 부분이라고 말해요. <div>는 아무것도 말하지 않는, 스타일이나 레이아웃을 위한 상자예요. CSS용 래퍼만 필요하다면 <div>를 쓰세요.

section과 article은 무엇이 다른가요?

<article>은 블로그 글, 댓글, 상품 카드처럼 페이지 밖에서도 그 자체로 의미가 통하는 콘텐츠예요. <section>은 더 큰 것의 일부로, 그 맥락 안에서만 의미가 통해요. 그 부분만 따로 발행할 수 있는지 생각해 보세요. 그렇다면 article이에요.

article 안에 section을, section 안에 article을 넣을 수 있나요?

네, 둘 다 돼요. 긴 글은 여러 section으로 나눌 수 있고, "Latest posts" 같은 section은 article 목록을 담을 수 있어요.

section에는 제목이 꼭 있어야 하나요?

거의 모든 경우에 있어야 해요. 제목이 주제의 이름을 붙이니까요. 붙일 제목이 떠오르지 않는다면 그 콘텐츠는 아마 section이 아니고 <div>가 더 맞아요.