[11] article 要素は、記事を表します。

[12] 例えば、ブログの新着記事最新5件が表示されるWebページでは、 各記事を article 要素で表すことができます。

属性

[2]

  • cite
  • pubdate

関連

[13] しばしば、 section 要素や div 要素との使い分けが難しいと話題にされています。これらの要素と迷う場合は、 おそらく article 要素は使わない方が適当です。

歴史

[22] >>32 より前は section 参照。

[32] HTML要素概説
要素名
entry
要素名
post
要素名
article
日付
説明
版 Web Applications 1.0 の文書ソース注釈に、 entry, post, article の構想がある。
出典
  • WA1-20040923: Web Applications 1.0, , Ian Hickson, Working Draft, , , https://web.archive.org/web/20041009144718/http://whatwg.org/specs/web-apps/current-work/

[28] Web Applications 1.0, , https://web.archive.org/web/20041210054847/http://www.whatwg.org/specs/web-apps/current-work/#specific

[104] HTML要素概説
要素名
article
日付
説明
版 Web Applications 1.0 に article がある。 現行仕様である。
出典
  • WA1-20041208: Web Applications 1.0, , Ian Hickson, Working Draft, , , https://web.archive.org/web/20041210054847/http://www.whatwg.org/specs/web-apps/current-work/

[1] Re: article: do we really need this? (Ian Hickson <ian@...> 著, 版) http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/13318

[3] IRC logs: freenode / #whatwg / 20110208 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20110208

[23] [whatwg] <comment> element in HTML5 Spec?, , https://lists.whatwg.org/pipermail/whatwg-whatwg.org/2010-December/029459.html

[4] [whatwg] <comment> element in HTML5 Spec? ( 版) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-July/032568.html

[5] id 属性と class 属性って別にそんなに似てないのに、似てて使い分け難しいけどこう違うんだ、みたいな記事とかで分かるような分からないような説明ばかりされて、そのせいでみんな混乱して、と集団催眠みたいになっていった気がする。

section 要素と article 要素もそうなりつつあるんじゃないの。

[6] [whatwg] Requests for new elements for comments ( ( 版)) http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-January/034506.html

[29] HTML要素概説
要素名
comment
日付
説明
頃からたびたび、 WHATWG メーリングリストで、 ブログ等のコメントのための comment が提案された。 article で表現可能として却下されている。 >>24 >>25 >>26
説明
、 WHATWG メーリングリストで現行 small の代案として提案されたことがある。 small がより妥当として却下されている。 >>27
出典
  • [24] Comment5:Richard: <comment> element in HTML5 Spec?, , , , https://lists.whatwg.org/pipermail/whatwg-whatwg.org/2010-December/029459.html
  • [25] Comment5:Hixie: <comment> element in HTML5 Spec?, , , , https://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-July/032568.html
  • [26] NEComments:Hixie: Requests for new elements for comments, , , , https://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-January/034506.html
  • [27] ElementsFeedback: Elements feedback, , , , https://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-September/037461.html

[7] [whatwg] Elements feedback ( ( 版)) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-September/037461.html

[8] Web Applications 1.0 r7666 Let's try adding even more text explaining article vs section. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=7665&to=7666

[9] Web Applications 1.0 r8759 Add some examples of app-like usages to increase example variety ( ( 版)) http://html5.org/r/8759

[10] IRC logs: freenode / #whatwg / 20090916 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20090916#l-441

[14] 【皇室ウイークリー】(番外編)佳子さまお誕生日〈45枚のお写真で振り返るこの1年〉(1/6ページ) - 産経ニュース (SANKEI DIGITAL INC. 著, 版) http://www.sankei.com/premium/news/151229/prm1512290006-n1.html

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

[15] 社労士:書き込み「社員うつにさせる方法」会員権停止に - 毎日新聞 ( 版) http://mainichi.jp/articles/20151230/k00/00m/040/090000c

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

[16] 年賀状のサルを12年前と比べてみたら...デザイナーは同じ人、ヒツジでも話題に ( 版) http://www.huffingtonpost.jp/2015/12/30/new-years-card-monkey-2004-and-2016_n_8893298.html

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

[17] 年賀状のサルを12年前と比べてみたら...デザイナーは同じ人、ヒツジでも話題に ( 版) http://www.huffingtonpost.jp/2015/12/30/new-years-card-monkey-2004-and-2016_n_8893298.html

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

[18] 【ライブレポート】Kalafina、もっと先へ | Kalafina | BARKS音楽ニュース (ジャパンミュージックネットワーク株式会社 著, 版) http://www.barks.jp/news/?id=1000122862

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

[19] 【今日は何の日?】あこぎという駅が開業 | 乗りものニュース ( 版) http://trafficnews.jp/post/47402/

<article>

<h1>【今日は何の日?】あこぎという駅が開業</h1>

<section id="article-meta">

<ul class="article-meta-top first-page">

<li class="article-date">2015.12.31</li>

[20] Adjust the definition of the main element and various examples (annevk著, ) https://github.com/whatwg/html/commit/97d84321fc1860f1236766156f6314ce447a1c27

[21] Restrict the main element to be used once per document (annevk著, ) https://github.com/whatwg/html/commit/1dec930b3df93c799d5f3f685a46940913476086