HTML section과 article 차이

중첩 구조

하나의 article 안에 여러 section을 둘 수 있다.
블로그 글 전체는 독립된 콘텐츠이고, 글 안의 각 장은 주제별 부분이기 때문이다.

<main>
  <h1>개발 노트</h1>
  <article>
    <h2>CSS 단위 선택 기준</h2>
    <p>단위마다 기준이 다르다.</p>

    <section>
      <h3>글꼴 크기</h3>
      <p>루트 기준과 컴포넌트 기준을 나눈다.</p>
    </section>

    <section>
      <h3>간격</h3>
      <p>함께 커져야 하는 대상을 먼저 정한다.</p>
    </section>
  </article>
</main>

반대로 하나의 section 안에 여러 article을 둘 수도 있다.
검색 결과라는 주제 안에 독립된 결과 항목이 반복되는 구조가 예다.

<section aria-labelledby="search-results-title">
  <h2 id="search-results-title">검색 결과</h2>

  <article>
    <h3>CSS 단위 선택 기준</h3>
    <p>px, em, rem의 계산 기준을 정리했다.</p>
  </article>

  <article>
    <h3>CSS 선택자 읽는 법</h3>
    <p>상태와 요소의 일부를 나눠 본다.</p>
  </article>
</section>

댓글처럼 바깥 글과 관련된 독립 콘텐츠는 article 안에 또 다른 article 요소를 중첩할 수도 있다.

제목과 접근성

article에는 암시적인 article 역할이 있다.
section은 접근 가능한 이름이 있으면 region 역할을 가지며, 이름이 없으면 일반 컨테이너로 취급된다.

앞선 예제는 aria-labelledby가 h2를 가리키게 해 검색 결과 영역의 이름을 분명히 했다.
모든 작은 묶음에 이름 있는 section을 추가하면 landmark가 지나치게 많아질 수 있으므로 탐색할 가치가 있는 영역에 사용해야 한다.

section이나 article 안에 h1을 반복한다고 브라우저가 제목 단계를 자동으로 다시 계산해준다고 기대하면 안 된다.
페이지의 실제 구조에 맞춰 h1, h2, h3 순서를 직접 정하고 중간 단계를 건너뛰지 않는 편이 좋다.

다른 요소와의 경계

내용에 더 구체적인 의미를 가진 요소가 있다면 section보다 먼저 검토한다.
주요 탐색 링크는 nav, 페이지의 핵심 내용은 main, 주변 내용은 aside가 더 정확하다.

레이아웃용 묶음은 div를 사용한다.
범용 컨테이너의 기준은 HTML div와 span 차이에서 더 자세히 볼 수 있다.

마지막 판단은 간단하다.
그 내용만 따로 읽어도 완결되면 article, 현재 문서의 한 장을 이루면 section, 의미 없이 묶기만 하면 div가 출발점이다.

참고 자료

• WHATWG HTML: The article element
• WHATWG HTML: The section element
• MDN: article
• MDN: section
• MDN: h1-h6