<article>

HTML <article> 요소는 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다. 사용 예제로 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있습니다.

하나의 문서가 여러 개의 <article>을 가질 수 있습니다. 예컨대 사용자가 스크롤하면 계속해서 다음 글을 보여주는 블로그의 경우, 각각의 글이 <article> 요소가 되며, 그 안에는 또 여러 개의 <section>이 존재할 수 있습니다.

콘텐츠 카테고리 플로우 콘텐츠, 구획 콘텐츠, 뚜렷한 콘텐츠.
가능한 콘텐츠 플로우 콘텐츠.
태그 생략 None, both the starting and ending tag are mandatory.
가능한 부모 요소 플로우 콘텐츠를 허용하는 모든 요소.
<article> 요소는 <address>의 후손이 될 수 없음에 주의하세요.
암시적 ARIA 역할 article
가능한 ARIA 역할 application, document, feed, main, none, presentation, region
DOM 인터페이스 HTMLElement

특성

이 요소는 전역 특성만 포함합니다.

사용 일람

  • 각각의 <article>을 식별할 수단이 필요합니다. 주로 제목(<h1>-<h6>) 요소를 <article>의 자식으로 포함하는 방법을 사용합니다.
  • <article> 요소가 중첩되어 있을 때, 안쪽에 있는 요소는 바깥쪽에 있는 요소와 관련된 글을 나타냅니다. 예를 들어 블로그 글의 댓글은, 글을 나타내는 <article> 요소 안에 중첩한 <article>로 나타낼 수 있습니다.
  • <article> 요소의 작성자 정보를 <address> 요소를 이용하여 제공할 수 있습니다. 그러나 중첩 <article>에는 적용되지 않습니다.
  • <article> 요소의 작성일자와 시간은 <time> 요소의 datetime 속성을 이용하여 설명할 수 있습니다. 참고로 <time> 요소의 pubdate 속성은 더 이상 W3C HTML5 표준안에 포함되지 않습니다.

예제

<article class="film_review">
  <header>
    <h2>Jurassic Park</h2>
  </header>
  <section class="main_review">
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <article class="user_review">
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on <time datetime="2015-05-16 19:00">May 16</time> by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on <time datetime="2015-05-17 19:00">May 17</time> by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on <time datetime="2015-05-15 19:00">May 15</time> by Staff.
    </p>
  </footer>
</article>

명세

명세 상태 주석
HTML Living Standard
The definition of '<article>' in that specification.
Living Standard
HTML 5.1
The definition of '<article>' in that specification.
Recommendation
HTML5
The definition of '<article>' in that specification.
Recommendation

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
articleChrome Full support 5Edge Full support 12Firefox Full support 4IE Full support 9Opera Full support 11.1Safari Full support 5WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support 11.1Safari iOS Full support 4.2Samsung Internet Android Full support Yes

Legend

Full support  
Full support