article과 section의 사용법, 차이점

정확한 태그 사용은 접근성 향상에 큰 도움을 줍니다. article과 section태그의 정확한 사용법을 알아보겠습니다.

article

article 태크는 하나의 독립적인 컨텐츠를 다룰 때 사용합니다. 독립적 컨텐츠는 뉴스 사이트에서 하나의 기사에 해당되고 쇼핑몰에서 하나의 상품, 동영상 스트리밍 사이트에서는 하나의 영상이 해당될 수 있습니다.

section

section은 하나의 컨텐츠 내부에서 구획을 짓기 위한 요소입니다. 예를 들어 하나의 기사에서 간단 요약 부분이 나오고 다음 문단부터 본문이 나오는 경우를 보겠습니다. 간단 요약 문단을 section 태그 안에 넣고 accessible name으로 '간단 요약'을 표기한다면 스크린 리더 사용자는 해당 section에 들어가게 되면 간단 요약 영역 영역에 들어간다는 사실을 알림 받고 끝날 때도 역시 알림을 받습니다. 또한 이 부분을 건너 뛸 수도 있게 됩니다.

<section aria-label="간단 요약">
	~ 요약 정보 ~
</section>
<section aria-label="본문">
	~ 본문 정보 ~
</section>

차이점

article과 section 태그는 모두 구획을 짓기 위한 요소입니다. 하지만 article은 독립적인 요소를 다루고 section은 하나의 요소에 목차와 같은 구획을 나눌 때 사용됩니다.

 

 

참고 자료 :

버리고 HTML5 써야 하는 이유 - Webactually