HTML

태그 사용법 완벽 가이드

HTML <article> 요소의 개념부터 실제 활용 예시까지 한 번에 알아보세요.

HTML <article> 태그는 독립적인(self-contained) 콘텐츠를 담는 아티클 영역을 정의할 때 사용합니다. 여기서 '독립적'이라는 것은, article 요소 안에 넣은 콘텐츠가 웹사이트의 다른 부분과 분리되어도 그 자체로 완전하게 동작해야 한다는 의미입니다.

HTML <article> 태그 사용 방법

<article> 태그는 다음과 같은 경우에 주로 활용됩니다:

• 블로그
• 매거진
• 뉴스 사이트

콘텐츠 컨테이너 역할을 하는 <main> 요소와 달리, <article> 태그는 하나의 HTML 문서 안에서 한 번 또는 여러 번 자유롭게 사용할 수 있습니다.

게시글 본문을 감쌀 때

예를 들어, 하나의 <article> 요소를 페이지의 메인 컨테이너로 사용하여 게시글(포스트) 전체를 감쌀 수 있습니다:

<article>
  <h1>게시글 제목</h1>
  <p>단락</p>
  <p>단락</p>
  <img src="your-image.jpg" alt="이미지 설명" />
  <p>단락</p>
  <p>단락</p>
</article>

실제로 지금 이 글을 읽고 계신 웹사이트도 비슷한 HTML 마크업 구조를 사용하고 있습니다. 페이지에서 마우스 오른쪽 버튼을 클릭한 후 검사(Inspect)를 선택하면 직접 확인해볼 수 있습니다.

콘텐츠 목록을 만들 때

<article> 요소는 서로 다른 콘텐츠를 각각의 article 요소로 감싸 목록 형태로 보여줄 때도 유용합니다. 예를 들어, 개별 포스트로 연결되는 링크가 있는 아티클 피드를 만들 수 있습니다:

<div>
  <article>
    <a href="/path-to-blog-post-1">
      <h3>블로그 포스트 1</h3>
    </a>
  </article>
  <article>
    <a href="/path-to-blog-post-2">
      <h3>블로그 포스트 2</h3>
    </a>
  </article>
  <article>
    <a href="/path-to-blog-post-3">
      <h3>블로그 포스트 3</h3>
    </a>
  </article>
</div>

위 세 개의 article 요소는 웹 브라우저에서 각각 독립된 콘텐츠로 인식됩니다. 이처럼 시맨틱하게 구조화하면 검색 엔진 최적화(SEO)와 접근성 측면에서도 긍정적인 효과를 기대할 수 있습니다.

함께 알아두면 좋은 HTML 컨테이너 요소들

<article> 태그는 콘텐츠를 담는 컨테이너 역할을 하는 여러 HTML 태그 중 하나입니다. 가장 많이 사용되는 HTML 컨테이너 요소는 다음과 같습니다:

• <section>: 주제별로 구분되는 콘텐츠 그룹
• <main>: 문서의 핵심 콘텐츠 영역 (문서당 한 번만 사용)
• <header>: 소개 영역 또는 내비게이션 링크 모음
• <footer>: 푸터 영역 (저작권, 연락처 등)
• <form>: 사용자 입력을 받는 폼 영역
• <div>: 범용 컨테이너 (다른 어떤 태그도 적합하지 않을 때 사용)

각 요소의 의미에 맞게 적절히 조합하면 더 깔끔하고 의미론적으로 견고한 HTML 문서를 작성할 수 있습니다.