[11] [DFN[[CODE(HTMLe)@en[[[article]]]]]] [[要素]]は、[[記事]]を表します。

[EG[
[12] 例えば、[[ブログ]]の新着記事最新5件が表示される[[Webページ]]では、
各記事を [CODE(HTMLe)@en[[[article]]]] [[要素]]で表すことができます。
]EG]

* 属性

[2] 
[FIG(short list)[
- [[大域属性]]
]FIG]

[HISTORY[
[FIG(short list)[
- [CODE(HTMLa)@en[[[cite]]]]
- [CODE(HTMLa)@en[[[pubdate]]]]
]FIG]
]HISTORY]

* 関連

[13] しばしば、 [CODE(HTMLe)@en[[[section]]]] [[要素]]や [CODE(HTMLe)@en[[[div]]]]
[[要素]]との使い分けが難しいと話題にされています。これらの[[要素]]と迷う場合は、
おそらく [CODE(HTMLe)@en[[[article]]]] [[要素]]は使わない方が適当です。

* 歴史

[22] >>32 より前は [CODE[section]] 参照。

[FIG(data)[ [32] [[HTML要素概説]]

:[F[要素名]]:[CODE[entry]]
:[F[要素名]]:[CODE[post]]
:[F[要素名]]:[CODE[article]]
:日付:[TIME[2004-09-23]]
:説明:
[TIME[2004-09-23]]版
[CITE@en-GB-hixie[Web Applications 1.0]]
の文書ソース注釈に、
[CODE[entry]],
[CODE[post]],
[CODE[article]]
の構想がある。
:出典:
[REFS[

-
[DFN[WA1-20040923]]:
[CITE@en-GB-hixie[Web Applications 1.0]], 
[DATA(.author)[[[WHATWG]]]],
[[Ian Hickson]],
[DATA(.status)[[[Working Draft]]]],
[TIME(.published)[23 September 2004][2004-09-23]],
[TIME[2024-09-01T06:53:36.000Z]], [TIME[2004-10-09T15:04:52.113Z]] <https://web.archive.org/web/20041009144718/http://whatwg.org/specs/web-apps/current-work/>

]REFS]

]FIG]

[28] [CITE@en-GB-hixie[Web Applications 1.0]], [TIME[2024-09-01T08:44:52.000Z]], [TIME[2004-12-10T06:02:35.522Z]] <https://web.archive.org/web/20041210054847/http://www.whatwg.org/specs/web-apps/current-work/#specific>


[FIG(data)[ [104] [[HTML要素概説]]

:[F[要素名]]:[CODE[article]]
:日付:[TIME[2004-09-23]]
:説明:
[TIME[2004-09-23]]版
[CITE@en-GB-hixie[Web Applications 1.0]]
に
[CODE[article]]
がある。
現行仕様である。
:出典:
[REFS[

-
[DFN[WA1-20041208]]:
[CITE@en-GB-hixie[Web Applications 1.0]], 
[DATA(.author)[[[WHATWG]]]],
[[Ian Hickson]],
[DATA(.status)[[[Working Draft]]]],
[TIME(.published)[8 December 2004][2004-12-08]],
[TIME[2024-09-01T08:36:36.000Z]], [TIME[2004-12-10T05:54:20.058Z]] <https://web.archive.org/web/20041210054847/http://www.whatwg.org/specs/web-apps/current-work/>

]REFS]

]FIG]


[1]
[CITE[Re: article: do we really need this?]] ([[Ian Hickson <ian@...>]] 著, [TIME[2008-02-21 20:08:01 +09:00]] 版) <http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/13318>


[3] [CITE[IRC logs: freenode / #whatwg / 20110208]]
( ([TIME[2011-03-20 22:04:27 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20110208>

[23] 
[CITE['''['''whatwg''']''' <comment> element in HTML5 Spec?]], [TIME[2024-09-20T16:18:33.000Z]], [TIME[2024-09-27T13:12:01.519Z]] <https://lists.whatwg.org/pipermail/whatwg-whatwg.org/2010-December/029459.html>

[4] [CITE['''['''whatwg''']''' <comment> element in HTML5 Spec?]]
([TIME[2011-07-20 10:17:19 +09:00]] 版)
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-July/032568.html>

[5] id 属性と class 属性って別にそんなに似てないのに、似てて使い分け難しいけどこう違うんだ、みたいな記事とかで分かるような分からないような説明ばかりされて、そのせいでみんな混乱して、と集団催眠みたいになっていった気がする。

section 要素と article 要素もそうなりつつあるんじゃないの。
[TIME[2011-12-28T12:44:00.100Z]]

[6] [CITE[''''''[''''''whatwg'''''']'''''' Requests for new elements for comments]]
( ([TIME[2012-01-26 08:56:45 +09:00]] 版))
<http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-January/034506.html>


[FIG(data)[ [29] [[HTML要素概説]]

:[F[要素名]]:[CODE[comment]]
:日付:[TIME[20010-12-13]]
:説明:
[TIME[2010]]頃からたびたび、
[[WHATWG]] [[メーリングリスト]]で、
[[ブログ]]等の[[コメント]]のための
[CODE[comment]]
が提案された。
[CODE[article]]
で表現可能として却下されている。
[SRC[>>24]]
[SRC[>>25]]
[SRC[>>26]]
:説明:
[TIME[2012]]、
[[WHATWG]] [[メーリングリスト]]で現行 [CODE[small]] 
の代案として提案されたことがある。
[CODE[small]] 
がより妥当として却下されている。
[SRC[>>27]]
:出典:
[REFS[

-
[24] 
[DFN[Comment5:Richard]]:
[CITE@en[<comment> element in HTML5 Spec?]],
[DATA(.author)[[[Richard Summers]]]],
[TIME(.published)[Mon Dec 13 10:49:01 PST 2010][2010-12-13T10:49:01-08:00]],
[TIME[2024-09-20T16:18:33.000Z]], [TIME[2024-09-27T13:12:01.519Z]] <https://lists.whatwg.org/pipermail/whatwg-whatwg.org/2010-December/029459.html>
-
[25] 
[DFN[Comment5:Hixie]]:
[CITE@en[<comment> element in HTML5 Spec?]], 
[DATA(.author)[[[Ian Hickson]]]],
[TIME(.published)[Tue Jul 19 17:34:42 PDT 2011][2011-07-19T17:34:42-07:00]],
[TIME[2024-09-20T16:18:33.000Z]], [TIME[2024-09-27T13:26:57.951Z]] <https://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-July/032568.html>
-
[26] 
[DFN[NEComments:Hixie]]:
[CITE@en[Requests for new elements for comments]], 
[DATA(.author)[[[Ian Hickson]]]],
[TIME(.published)[Wed Jan 25 14:26:31 PST 2012][2012-01-25T14:26:31-08:00]],
[TIME[2024-09-20T16:18:34.000Z]], [TIME[2024-09-27T13:26:05.320Z]] <https://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-January/034506.html>
-
[27] 
[DFN[ElementsFeedback]]:
[CITE@en[Elements feedback]], 
[DATA(.author)[[[Ian Hickson]]]],
[TIME(.published)[Thu Sep 27 11:27:30 PDT 2012][2012-09-27T11:27:30-07:00]],
[TIME[2024-09-20T16:18:34.000Z]], [TIME[2024-09-27T13:25:03.216Z]] <https://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-September/037461.html>

]FIG]


[7] [CITE[''''''[''''''whatwg'''''']'''''' Elements feedback]]
( ([TIME[2012-09-27 18:27:33 +09:00]] 版))
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-September/037461.html>

[8] [CITE@en[Web Applications 1.0 r7666 Let's try adding even more text explaining article vs section.]]
( ([TIME[2013-01-29 10:21:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=7665&to=7666>

[9] [CITE@en[Web Applications 1.0 r8759 Add some examples of app-like usages to increase example variety]]
( ([TIME[2014-09-12 08:01:00 +09:00]] 版))
<http://html5.org/r/8759>

[10] [CITE[IRC logs: freenode / #whatwg / 20090916]]
([TIME[2009-11-01 21:59:15 +09:00]] 版)
<http://krijnhoetmer.nl/irc-logs/whatwg/20090916#l-441>

[FIG(quote)[
[FIGCAPTION[
[14] [CITE@ja[【皇室ウイークリー】(番外編)佳子さまお誕生日〈45枚のお写真で振り返るこの1年〉(1/6ページ) - 産経ニュース]]
([[SANKEI DIGITAL INC.]] 著, [TIME[2015-12-29 07:04:50 +09:00]] 版)
<http://www.sankei.com/premium/news/151229/prm1512290006-n1.html>
]FIGCAPTION]

> 
> <article class="clearfix">
> <span class="addition">
> <time><!-- date --><span id="__r_publish_date__">2015.12.29 06:00</span><!-- date end --></time><span class="speech">更新</span>
> </span>
> <h1><span class="subtitle">【皇室ウイークリー】</span><br />(番外編)佳子さまお誕生日〈45枚のお写真で振り返るこの1年〉</h1>
> 

]FIG]


[FIG(quote)[
[FIGCAPTION[
[15] [CITE@ja[社労士:書き込み「社員うつにさせる方法」会員権停止に - 毎日新聞]]
([TIME[2015-12-08 15:44:48 +09:00]] 版)
<http://mainichi.jp/articles/20151230/k00/00m/040/090000c>
]FIGCAPTION]

> <article>
> <!--| header BGN |-->
> <header>
> <!--| header-box BGN |-->
> <div class="header-box">
>  
> <p class="keyword">
> <a href="/ch151285971i/%E7%A4%BE%E5%8A%B4%E5%A3%AB">社労士</a>
>  
> </p>
> </div>
> <!--| header-box BGN |-->
> <h1>書き込み「社員うつにさせる方法」会員権停止に</h1>
> 

]FIG]


[FIG(quote)[
[FIGCAPTION[
[16] [CITE@ja[年賀状のサルを12年前と比べてみたら...デザイナーは同じ人、ヒツジでも話題に]]
([TIME[2015-12-31 14:24:23 +09:00]] 版)
<http://www.huffingtonpost.jp/2015/12/30/new-years-card-monkey-2004-and-2016_n_8893298.html>
]FIGCAPTION]

> 
>             <li class="three-up-item">
>             <article  data-beacon='{"p":{"plid":"8882462","mpid":2}}' >
>                 <figure>
>                     <a href="http://www.huffingtonpost.jp/2015/12/27/story_n_8882462.html"  data-beacon='{"p":{"lnid":"img"}}'  onclick="HPTrack.trackPageview('');"><img data-img-path="http://i1.huffpost.com/gen/3825352/images/r-BUKKEN-medium260.jpg" src="http://s1.huffpost.com/images/blank.gif" alt="Image for 100畳のバルコニー付きで家賃8万円。荻窪の贅沢すぎる賃貸物件とは" class="async-img-load" /></a>
>                 </figure>
>                 <strong><a href="http://www.huffingtonpost.jp/2015/12/27/story_n_8882462.html"  data-beacon='{"p":{"lnid":"hdln"}}'  onclick="HPTrack.trackPageview('');">100畳のバルコニー付きで家賃8万円。荻窪の贅沢すぎる賃貸物件とは</a></strong>
>             </article>
>         </li>
>             <li class="three-up-item">
>             <article  data-beacon='{"p":{"plid":"8892250","mpid":3}}' >
>                 <figure>
>                     <a href="http://www.huffingtonpost.jp/engadget-japan/big-dog_b_8892250.html"  data-beacon='{"p":{"lnid":"img"}}'  onclick="HPTrack.trackPageview('');"><img data-img-path="http://i0.huffpost.com/gen/3832396/images/r-BIGDOG-medium260.jpg" src="http://s1.huffpost.com/images/blank.gif" alt="Image for Googleのキモかわ四脚ロボ、米軍から不採用通知を受ける その理由は..." class="async-img-load" /></a>
>                 </figure>
>                 <strong><a href="http://www.huffingtonpost.jp/engadget-japan/big-dog_b_8892250.html"  data-beacon='{"p":{"lnid":"hdln"}}'  onclick="HPTrack.trackPageview('');">Googleのキモかわ四脚ロボ、米軍から不採用通知を受ける その理由は...</a></strong>
>             </article>
>         </li>

]FIG]


[FIG(quote)[
[FIGCAPTION[
[17] [CITE@ja[年賀状のサルを12年前と比べてみたら...デザイナーは同じ人、ヒツジでも話題に]]
([TIME[2015-12-31 14:25:02 +09:00]] 版)
<http://www.huffingtonpost.jp/2015/12/30/new-years-card-monkey-2004-and-2016_n_8893298.html>
]FIGCAPTION]

> 
> <section class="main group">
>             <!-- Breaking news bar -->
>         <!-- main entry body -->
>     <div class="column entry">
>         <!-- Article content -->
>         <!-- entry header -->
> 	<article class="entry" id="printable">
> 		<header>
>                                         
>                                         <!-- Title -->
>                 <h1 class="title">年賀状のサルを12年前と比べてみたら...デザイナーは同じ人、ヒツジでも話題に</h1>
>                                         <!-- Author Information -->
>                 
>     <div class="author editor">

]FIG]


[FIG(quote)[
[FIGCAPTION[
[18] [CITE[【ライブレポート】Kalafina、もっと先へ | Kalafina | BARKS音楽ニュース]]
([[ジャパンミュージックネットワーク株式会社]] 著, [TIME[2015-12-31 14:56:16 +09:00]] 版)
<http://www.barks.jp/news/?id=1000122862>
]FIGCAPTION]

> 
> <div id="mainColumn">
> <article id="news1000122862" class="news-article keyword-">
> <h1 class="article-title">【ライブレポート】Kalafina、もっと先へ</h1>
> <p class="article-postdate">2015-12-31 10:23:00</p>
> <div class="social-btn-bar">

]FIG]


[FIG(quote)[
[FIGCAPTION[
[19] [CITE@ja[【今日は何の日?】あこぎという駅が開業 | 乗りものニュース]]
([TIME[2015-12-31 15:07:49 +09:00]] 版)
<http://trafficnews.jp/post/47402/>
]FIGCAPTION]

> 
> <article>
> <h1>【今日は何の日?】あこぎという駅が開業</h1>
> <section id="article-meta">
> <ul class="article-meta-top first-page">
> 	<li class="article-date">2015.12.31</li>
> 

]FIG]


[20] [CITE@en[Adjust the definition of the main element and various examples]]
([[annevk]]著, [TIME[2018-01-15 17:19:01 +09:00]])
<https://github.com/whatwg/html/commit/97d84321fc1860f1236766156f6314ce447a1c27>

[21] [CITE@en[Restrict the main element to be used once per document]]
([[annevk]]著, [TIME[2018-01-23 17:10:16 +09:00]])
<https://github.com/whatwg/html/commit/1dec930b3df93c799d5f3f685a46940913476086>