HTML5에서 새롭게 도입된 <section>과 <article> 요소는 문서의 구조를 의미론적으로(시맨틱하게) 표현할 수 있게 해주는 핵심 태그입니다. 특히 이 두 요소는 스크린 리더(screen reader)에서도 유용하게 활용되며, 시각 장애가 있는 사용자가 웹 페이지의 내용을 더 쉽게 읽을 수 있도록 돕습니다. 또한 전자책(eBook) 리더에서도 콘텐츠를 올바르게 재구성하는 데 활용됩니다.
<section>과 <article>, 왜 도입되었을까요?
이전에는 콘텐츠를 구분하기 위해 <div>에 class나 id를 붙여 사용했습니다. 하지만 <div> 자체에는 아무런 의미가 없어서 검색 엔진이나 보조 기기가 문서 구조를 파악하기 어려웠습니다. 이러한 한계를 해결하기 위해 HTML5에서 시맨틱 요소들이 도입되었습니다.
시맨틱 요소를 사용하면 다음과 같은 장점이 있습니다.
- 접근성 향상: 스크린 리더 사용자가 페이지 구조를 쉽게 파악하고 원하는 콘텐츠로 바로 이동할 수 있습니다.
- SEO 개선: 검색 엔진이 페이지의 주제와 콘텐츠 계층 구조를 더 정확하게 이해합니다.
- 전자책 지원: eBook 리더기에서도 콘텐츠가 자연스럽게 표시됩니다.
- 코드 가독성: 개발자가 코드만 봐도 각 영역의 의미를 알 수 있습니다.
<section> 요소 사용법
<section>은 주제별로 묶인 콘텐츠 그룹을 나타냅니다. 일반적으로 각 섹션에는 제목(<h1>~<h6>)이 함께 포함됩니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML Section Tag</title>
</head>
<body>
<section>
<h1>Java</h1>
<h3>Inheritance</h3>
<p>Inheritance defines the relationship between superclass and subclass.</p>
</section>
</body>
</html>위 예제에서는 'Java'라는 하나의 주제 영역을 <section>으로 감싸고, 그 안에 제목과 설명 단락을 함께 배치했습니다.
<article> 요소 사용법
<article>은 그 자체로 독립적으로 배포하거나 재사용할 수 있는 완결된 콘텐츠를 나타냅니다. 뉴스 기사, 블로그 게시물, 포럼 글, 사용자 댓글 등이 대표적인 예입니다.
<!DOCTYPE html>
<html>
<body>
<main>
<h1>Learning</h1>
<p>Learn to gain experience and try to share your knowledge with others.</p>
<article>
<h3>Web Development Tutorials</h3>
<p>Consist of CSS, HTML, and PHP tutorials for 2nd Semester exams.</p>
</article>
<article>
<h3>Academic Tutorials</h3>
<p>Consist of Computer Fundamental, Computer Network tutorials for 1st Semester exams.</p>
</article>
</main>
</body>
</html>'Learning'이라는 메인 콘텐츠 안에 '웹 개발 튜토리얼'과 '학술 튜토리얼'이라는 서로 독립적인 게시물 두 개를 각각 <article>로 감쌌습니다. 각 게시물은 별개의 글로 취급할 수 있으며, 필요하다면 RSS 피드 등으로 따로 배포할 수도 있습니다.
두 요소의 차이점 한눈에 보기
| 구분 | <section> | <article> |
|---|---|---|
| 역할 | 주제별 콘텐츠 그룹화 | 독립적이고 재사용 가능한 콘텐츠 |
| 예시 | 소개, 연락처, 서비스 안내 등의 구획 | 블로그 글, 뉴스 기사, 댓글 |
| 판단 기준 | "이 부분이 하나의 주제 구획인가?" | "따로 배포해도 의미가 통하는가?" |
정리하면, <section>은 문서를 주제별로 나누는 '구획'이고, <article>은 독립성을 가진 '완결된 콘텐츠'입니다. 두 요소를 상황에 맞게 적절히 활용하면 접근성과 SEO, 코드 유지보수성이 모두 크게 향상됩니다.