HTML5의 <section>과 <article> 요소, 정말 쓸모가 없을까?

HTML5에서 새롭게 도입된 <section>과 <article> 요소는 겉보기에는 <div>와 큰 차이가 없어 보일 수 있습니다. 하지만 이 두 요소는 웹 문서에 의미(semantics)를 부여하는 중요한 시맨틱 요소로, 결코 쓸모없지 않습니다.

특히 이 요소들은 스크린 리더(screen reader)와 같은 보조 기술에서 유용하게 활용됩니다. 시각 장애인 사용자가 웹 페이지의 콘텐츠 구조를 쉽게 파악하고 읽어 나갈 수 있도록 도와주며, 전자책(eBook) 리더에서도 콘텐츠를 적절히 구분하는 데 기여합니다. 아울러 검색 엔진이 문서 구조를 더 정확하게 이해하도록 돕기 때문에 SEO 측면에서도 긍정적인 효과를 기대할 수 있습니다.

그렇다면 두 요소를 실제로 어떻게 사용하는지 예제를 통해 살펴보겠습니다.

<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>

<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>

<section>과 <article>의 차이점

두 요소의 역할을 간단히 정리하면 다음과 같습니다.

<section>: 주제별로 콘텐츠를 묶는 일반적인 그룹화 요소입니다.
<article>: 그 자체로 완결되어 독립적으로 배포하거나 재사용할 수 있는 콘텐츠를 감쌀 때 사용합니다.
단순히 스타일 지정이나 레이아웃 배치가 목적이라면 여전히 <div>를 사용하는 것이 적절합니다.

결론적으로 <section>과 <article>은 쓸모없는 요소가 아니라, 접근성 향상과 문서 구조화, 검색 엔진 최적화까지 고려한다면 반드시 활용해야 할 HTML5의 핵심 요소입니다.