<article>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015년 7월⁩.

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

시도해 보기

<article>  <h1>Weather forecast for Seattle</h1>  <article>    <h2>03 March 2018</h2>    <p>Rain.</p>  </article>  <article>    <h2>04 March 2018</h2>    <p>Periods of rain.</p>  </article>  <article>    <h2>05 March 2018</h2>    <p>Heavy rain.</p>  </article></article>

.forecast {  margin: 0;  padding: 0.3rem;  background-color: #eee;}.forecast > h1,.day-forecast {  margin: 0.5rem;  padding: 0.3rem;  font-size: 1.2rem;}.day-forecast {  background: right/contain content-box border-box no-repeat    url("/shared-assets/images/examples/rain.svg") white;}.day-forecast > h2,.day-forecast > p {  margin: 0.2rem;  font-size: 1rem;}

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

콘텐츠 카테고리	플로우 콘텐츠,구획 콘텐츠,뚜렷한 콘텐츠.
가능한 콘텐츠	플로우 콘텐츠.
태그 생략	불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다.
가능한 부모 요소	플로우 콘텐츠를 허용하는 모든 요소. `<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 표준안에 포함되지 않습니다.

예제

html

<article>  <header>    <h2>Jurassic Park</h2>  </header>  <section>    <p>Dinos were great!</p>  </section>  <section>    <article>      <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>      <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>