Revision 938079 of article

<p>{{HTMLRef}}</p>

<p><strong>HTML <code>&lt;article&gt;</code> 要素</strong>はドキュメント、ページ、アプリケーション、あるいはサイトの中で自己完結した構成物を表します。これは、例えば通信社によって独立して配信や再利用が可能であることを意図します。これはフォーラムへの投稿、雑誌や新聞の記事、ブログのエントリ、オブジェクト、その他のコンテンツで独立したアイテムが考えられるでしょう。</p>

<p>それぞれの <code>&lt;article&gt;</code> は、主に子要素として見出し (<a href="/ja/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code></a> element) を含むことによって明確にするべきです。</p>

<div class="note">
<p><strong>使用上の注意:</strong></p>

<ul>
 <li><code>&lt;article&gt;</code> 要素を入れ子にした場合、内側の要素は外側の要素に関する記事を表します。例えばブログ投稿へのコメントは、ブログ投稿を表す <code>&lt;article&gt;</code> 内へ入れ子にした <code>&lt;article&gt;</code> 要素にできます。</li>
 <li><code>&lt;article&gt;</code> 要素の著者情報は {{HTMLElement("address")}} 要素で提供できますが、入れ子にされた <code>&lt;article&gt;</code> 要素に適用してはいけません。</li>
 <li><code>&lt;article&gt;</code> 要素の発行日時は、{{HTMLElement("time")}} 要素の {{htmlattrxref("datetime", "time")}} 属性で示すことができます。<em>{{HTMLElement("time")}} 要素の {{htmlattrxref("pubdate", "time")}} 属性は W3C HTML 5 標準から外されましたので注意してください。</em></li>
</ul>
</div>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/ja/docs/HTML/Content_categories" title="HTML/Content_categories">コンテンツカテゴリ</a></th>
   <td><a href="/ja/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">フローコンテンツ</a>、セクショニングコンテンツ、パルパブルコンテンツ</td>
  </tr>
  <tr>
   <th scope="row">許可された内容</th>
   <td><a href="/ja/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">フローコンテンツ</a></td>
  </tr>
  <tr>
   <th scope="row">タグの省略</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">許可された親要素</th>
   <td><a href="/ja/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素。<code>&lt;article&gt;</code> 要素を {{HTMLElement("address")}} 要素の子孫にしてはいけない点に注意してください。</td>
  </tr>
  <tr>
   <th scope="row">DOM インターフェイス</th>
   <td>{{domxref("HTMLElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes" name="Attributes">属性</h2>

<p>この要素は、すべての要素で使用可能な<a href="/ja/docs/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a>以外の属性を持ちません。</p>

<h2 id="Examples" name="Examples">例</h2>

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

<h2 id="Specifications" name="Specifications">仕様</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">策定状況</th>
   <th scope="col">コメント</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'sections.html#the-article-element', '&lt;article&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'sections.html#the-article-element', '&lt;article&gt;')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '&lt;article&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>機能</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>基本サポート</td>
   <td>5</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>9.0</td>
   <td>11.10</td>
   <td>4.1</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>機能</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>基本サポート</td>
   <td>2.2</td>
   <td>{{CompatGeckoMobile("2.0")}}</td>
   <td>9.0</td>
   <td>11.0</td>
   <td>4.2</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>他のセクション関連要素: {{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")}}</li>
 <li class="last"><a href="/ja/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">HTML5 文書のセクションとアウトライン</a></li>
</ul>