<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 class="forecast">
  <h1>Weather forecast for Seattle</h1>
  <article class="day-forecast">
    <h2>03 March 2018</h2>
    <p>Rain.</p>
  </article>
  <article class="day-forecast">
    <h2>04 March 2018</h2>
    <p>Periods of rain.</p>
  </article>
  <article class="day-forecast">
    <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>이 존재할 수 있습니다.

콘텐츠 카테고리 가능한 콘텐츠 태그 생략 가능한 부모 요소 암시적 ARIA 역할 가능한 ARIA 역할 DOM 인터페이스

플로우 콘텐츠, 구획 콘텐츠, 뚜렷한 콘텐츠.

플로우 콘텐츠.

불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다.

플로우 콘텐츠를 허용하는 모든 요소.
<article> 요소는 <address>의 후손이 될 수 없음에 주의하세요.

article

application, document, feed, main, none, presentation, region

HTMLElement

특성

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

사용 일람

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

예제

html
<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>