728x90

1. article 태그란?

HTML의 <article> 태그는 문서, 애플리케이션, 웹사이트, 또는 웹 애플리케이션에서 독립적으로 구분될 수 있는 자체 콘텐츠를 나타내는 요소입니다. 이는 독립적으로 배포되거나 재사용 가능한 콘텐츠 블록을 정의하는 데 사용됩니다.

2. 주요 특징 및 역할

독립적인 콘텐츠
- <article> 요소는 독립적으로 이해될 수 있는 콘텐츠를 담습니다.
- 예: 블로그 글, 뉴스 기사, 포럼 글, 사용 설명서, 제품 정보 등.
재사용 가능성
- <article>에 포함된 콘텐츠는 다른 문맥에서도 그대로 사용될 수 있도록 설계됩니다.
- RSS 피드나 다른 웹사이트로 공유하기 적합합니다.
문맥적 의존성 없음
- <article> 내부의 내용은 그 자체로 문맥을 가지며, 외부 컨텍스트에 의존하지 않습니다.

3. 사용 예시

3-1. 블로그 글

<article>
  <h2>HTML5에서의 새로운 태그</h2>
  <p>HTML5는 더 나은 웹 구조를 위해 새로운 태그를 도입했습니다...</p>
  <p>작성일: 2025년 1월 17일</p>
</article>

HTML5에서의 새로운 태그

HTML5는 더 나은 웹 구조를 위해 새로운 태그를 도입했습니다...

작성일: 2025년 1월 17일

3-2. 뉴스 기사

<article>
  <header>
    <h1>오늘의 주요 뉴스</h1>
    <p>2025년 1월 17일 작성</p>
  </header>
  <p>새로운 기술이 발표되며...</p>
  <footer>
    <p>작성자: 홍길동</p>
  </footer>
</article>

오늘의 주요 뉴스

2025년 1월 17일 작성

새로운 기술이 발표되며...

3-3. 포럼 글

<article>
  <header>
    <h2>HTML5 태그의 올바른 사용법</h2>
    <p>게시자: 웹 초보자 | 게시일: 2025년 1월 17일</p>
  </header>
  <p>HTML5 태그를 학습하면서 궁금한 점이 생겼습니다...</p>
</article>

HTML5 태그의 올바른 사용법

게시자: 웹 초보자 | 게시일: 2025년 1월 17일

HTML5 태그를 학습하면서 궁금한 점이 생겼습니다...

4. 속성과 사용법

Global Attributes: HTML 전역 속성 모두 사용 가능. (id, class, style, data-* 등)
ARIA Role: article은 보통 접근성 도구에서 자동으로 인식되며, role="article"로 명시 가능.

<article> VS. <section> 비교

<article>	<section>
독립적으로 배포되거나 재사용 가능	주제를 논리적으로 묶는 그룹을 정의
자체적으로 완전한 콘텐츠를 포함	외부 컨텍스트에 의존 가능
예: 블로그 글, 뉴스 기사	예: 장별 구분, 문서의 주제별 섹션

5. 요약

<article> 태그는 독립적이고 재사용 가능한 콘텐츠를 정의하며, 명확한 구조를 제공하여 검색엔진 최적화(SEO)와 접근성 향상에 기여합니다. 블로그 포스트, 뉴스 기사, 사용자 리뷰 등 다양한 용도로 활용할 수 있습니다.