이 페이지에 스크립팅 오류가 있습니다. 오류가 사이트 편집자에 의해 처리되는 동안, 아래에 있는 부분 콘텐츠만 볼 수 있습니다.

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

개요

HTML <article> 요소는 문서, 페이지, 애플리케이션,  또는 사이트 안에 독립적으로 구분되거나 재사용 가능한 영역(예: 신디케이션)을 구성할 수 있습니다. 포럼의 글, 매거진/신문의 기사, 블로그 글 등이 여기에 포함됩니다.

  • 컨텐츠 범주 플로우 컨텐츠, 구획 컨텐츠 , 보이는 컨텐츠.
  • 허용된 컨텐츠플로우 컨텐츠.
  • 태그 생략 {{no_tag_omission}}
  • 허용된 부모 요소 플로우 컨텐츠를 허용하는 모든 요소.{{HTMLElement("address")}} 요소는 <article> 요소의 자손이 될 수 없음에 유의.
  • 허용된 ARIA 역할 {{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}
  • DOM 인터페이스 {{domxref("HTMLElement")}}

속성

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

사용 일람

  • <article> 요소는 일반적으로 제목(<h1>-<h6> 요소)을 자식으로 포함하여 식별되어야 합니다.
  • <article> 요소가 중첩되어 있을 때, 안쪽에 있는 요소는 바깥쪽에 있는 요소와 관련된 글을 나타냅니다. 예를 들어, 블로그 포스트의 댓글은 포스트를 나타내는 <article> 요소 안에 중첩되는 <article> 요소가 될 수 있습니다.
  • <article> 요소의 작성자 정보는 {{HTMLElement("address")}} 요소를 이용하여 제공될 수 있지만, 중첩된 다른 <article> 요소에는 해당하지 않습니다.
  • <article> 요소의 작성일자와 시간은 {{HTMLElement("time")}} 요소의 {{htmlattrxref("datetime", "time")}} 속성을 이용하여 설명할 수 있습니다. 참고로 {{HTMLElement("time")}} 요소의 {{htmlattrxref("pubdate", "time")}} 속성은 더 이상 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>

사양

사양 상태 주석

{{SpecName('HTML WHATWG',
'sections.html#the-article-element', '<article>')}}

{{Spec2('HTML WHATWG')}}  
{{SpecName('HTML5.1', 'sections.html#the-article-element', '<article>')}} {{Spec2('HTML5.1')}}  
{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}} {{Spec2('HTML5 W3C')}}  

브라우저 호환성

{{CompatibilityTable}}

기능 Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 5 {{CompatGeckoDesktop("2.0")}} 9.0 11.10 4.1
기능 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.2 {{CompatGeckoMobile("2.0")}} 9.0 11.0 5.0 (iOS 4.2)

같이 보기

  • 다른 구획 관련 요소들: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}
  • Sections and outlines of an HTML5 document.

{{ HTMLRef }}

문서 태그 및 공헌자

 이 페이지의 공헌자: cmygray, Kaben, naduhy2, azunyan3
 최종 변경: cmygray,