•
article은 최대한 자주 사용한다.
•
section은 접근성 목적으로만 사용한다 - HTML Living standard에는 outline 알고리즘이 적용되지 않았다.
•
문서 구조에 영향을 끼치지 않는다면 div를 사용한다.
<article>
HTML 명세: "완전하고 독립적인 구성요소로, 원칙적으로 독립적으로 배포하거나 재사용 가능한 것"
•
포럼 포스트, 블로그 글, 사용자 댓글, 트윗
•
자주 사용해도 괜찮음
<section>
HTML 명세: "문서나 애플리케이션의 일반적인 섹션으로, 주제별 컨텐츠 그룹핑"
•
일반적으로 헤딩을 포함해야 함
•
예시: 챕터, 탭 다이얼로그의 페이지들, 논문의 번호가 매겨진 섹션들
•
접근성 목적으로 사용해야하고 heading이 없다면 aria-label을 같이 사용한다.
구현되지 않은 outline 알고리즘
<!-- HTML5 문서 아웃라인의 원래 의도 -->
<section>
<h1>메인 섹션</h1> <!-- 이론상 level 1 -->
<section>
<h1>서브 섹션</h1> <!-- 이론상 level 2가 되어야 함 -->
</section>
</section>
HTML
복사
•
HTML Living standard의 문서 아웃라인 알고리즘은 브라우저에 구현되지 않았으므로 항상 h1, h2, h3 위계에 맞게 헤딩을 사용해야 한다.
aria-labeledby, aria-label
<section aria-labelledby="posts">
<h2 id="posts">All blog posts</h2>
<article>
<!-- 블로그 포스트 내용 -->
</article>
</section>
HTML
복사
•
페이지에 이미 적절한 헤딩이나 텍스트가 존재하면 id로 엮어 주는게 제일 확실하다.