2. 콘텐츠의 종류별 구분: <main>, <article>, <section>
이 세 가지 태그는 문서의 핵심 내용을 구성하며, 콘텐츠의 성격에 따라 명확히 구분하여 사용해야 합니다.
2.1. <main> 태그
<main> 태그는 문서의 주요 콘텐츠를 감싸는 데 사용됩니다. 스크린 리더와 검색 엔진에게 이 부분이 페이지의 핵심 내용임을 알립니다.
- 문서당 하나만 사용 가능합니다.
- 머리말, 탐색, 꼬리말 등의 보조 콘텐츠는 포함하지 않습니다.
<main>
<article>...</article> <!-- 주요 기사 -->
<section>...</section> <!-- 관련 섹션 -->
</main>
2.2. <article>와 <section>
<article>은 독립적으로 배포하거나 재사용할 수 있는 완전한 콘텐츠(뉴스 기사, 블로그 포스트, 댓글 등)에 사용됩니다. <section>은 관련 콘텐츠를 주제별로 그룹화할 때 사용됩니다.
<main>
<!-- 독립적으로 읽을 수 있는 블로그 포스트 -->
<article>
<h2>시맨틱 마크업의 이점</h2>
<p>...본문 내용...</p>
</article>
<!-- 관련 주제로 그룹화된 콘텐츠 -->
<section>
<h2>관련 자료</h2>
<ul>...</ul>
</section>
</main>