<article>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
HTML <article> 요소는 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다. 사용 예제로 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있습니다.
시도해보기
하나의 문서가 여러 개의 <article>을 가질 수 있습니다. 예컨대 사용자가 스크롤하면 계속해서 다음 글을 보여주는 블로그의 경우, 각각의 글이 <article> 요소가 되며, 그 안에는 또 여러 개의 <section>이 존재할 수 있습니다.
특성
이 요소는 전역 특성만 포함합니다.
사용 일람
- 각각의
<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>
명세
| Specification |
|---|
| HTML Standard # the-article-element |
브라우저 호환성
BCD tables only load in the browser