Edit

Page

Page title:

Page body:

[3] [DFN[[CODE(HTMLe)@en[[[section]]]]]] [[要素]]は、[[文章]]の[[章節]]を表します。

* 関連

[5] しばしば、 [CODE(HTMLe)@en[[[div]]]] [[要素]]との使い分けがわからないと言われます。
発祥 (>>8) を考えるとそれも当然なのかもしれません。[[章]]に当たると考えられるものなら
[CODE(HTMLe)@en[[[section]]]] を使い、それ以外なら [CODE(HTMLe)@en[[[div]]]]
を使うべきです。[[章]]に当たるかどうか悩む時は、おそらく[[章]]ではないので、
[CODE(HTMLe)@en[[[div]]]] を使うべきです。

[6] [CODE(HTMLe)@en[[[article]]]] [[要素]]との使い分けも難しいと言われることがよくありますが、
むしろこちらは簡単で、迷うものはすべて [CODE(HTMLe)@en[[[article]]]] ではありません。

;; [17] [CODE(HTMLe)@en[[[section]]]] も [CODE(HTMLe)@en[[[article]]]] も、
使うことは義務ではないのですから、適切かどうかを無理に考える必要はありません。
「章」や「記事」と言われてしっくりこないものは、その[[要素]]を使う必要はない、
という常識的な判断で十分です。

* 歴史

** 前史

[2] ''WWW-Talk 1992: MIME as a hypertext architecture'' <http://www.webhistory.org/www.lists/www-talk.1992/0079.html>: [[HTML]] の [CODE(HTML)[SECTION]] 要素初出? ([[DanConnolly]] が x-[[HTTP]] (後の [[HTTP/1.0]]) 向けの x-HTML の一部として提案したもの。)

[8] 元々 [CODE(HTMLe)@en[[[div]]]] [[要素]]は当初の提案では [CODE(HTMLe)@en[[[section]]]]
に近い意味を持っていましたが、厳密な[[章節]]構造を持つ[[文書]]にしか適用できないとすれば柔軟性を欠くとして次第に用途が拡大され、
現在の定義のようになってしまいました。

[FIG(data)[ [36] [[HTML要素概説]]

:[F[要素名]]:[CODE[section]]
:日付:[TIME[1992-06-06]]
:説明:
[TIME[1992-06-06]]付の 
[[Dan Connolly]]
の [[www-talk]] への投稿の [[DTD]][SEE[>>34]] に、
[CODE[section]]
がある。
この時点ではまだ
[CODE[body]]
がなく、
最外
[CODE[section]]
が現在の
[CODE[body]]
のように使われる。
[SRC[>>33]]
しかしこの翌月の [[DTD]] では [CODE[section]] は使われなくなり、
[CODE[body]] が導入されることになる。
:出典:
[REFS[

- 
[33] 
[CITE[MIME as a hypertext architecture]], 
[DATA(.author)[[[Dan Connolly]]]],
[TIME(.published)[Sat, 06 Jun 92 00:53:20 CDT][1992-06-06T00:53:20-06:00]],
[TIME[2003-08-04T15:50:20.000Z]], [TIME[2024-08-12T11:45:34.131Z]] <https://lists.w3.org/Archives/Public/www-talk/1992MayJun/0020.html>

]REFS]
:注釈:
-
[34] 
当時の [[Dan Connolly]] は、
[[SGML]] と [[MIME]] を活用した [[HTML]] の再構成を模索していた。
この [[DTD]] は [[HTML]] を [[SGML DTD]] として記述した最古のものだが、
その後の [[HTML DTD]] と違って当時の実際の [[HTML]] に忠実ではない。
[SRC[SW:[[HTML2]]]]

]FIG]

[FIG(data)[ [216] [[HTML要素概説]]

:[F[要素名]]:[CODE[group]]
:日付:[TIME[1993-07-13]]
:説明:
[TIME[1993-07-13]]版 [CITE[HTML+]] [[DTD]]
に
[CODE[group]] 
がある。
[SRC[HTML+19930713]]
現在の [CODE[section]] に当たる。

]FIG]

** HTML4

[4] [[HTML4]] 時代には[[章節]]を表す専用の[[要素]]はありませんでした。必要があれば
[CODE(HTMLe)@en[[[div]]]] [[要素]]に [CODE(HTML)@en[section]] などの
[CODE(HTMLa)@en[[[class]]]] [[属性]]を指定するのが一般的ではありましたが、
それをそのまま標準化できるほど統一された慣習ではありませんでした。

[175] [[HTMLもどき]]の [[DTBook]] には [DFN[[CODE[level]]]] [[要素]]がありました。
[SRC[>>25]]
[[SGML]] の世界の [CODE[div[VAR[n]]]]
に近いものですが、[[付番]]がなく [[HTML]] の [CODE[section]] に近い性質を持っていました。

[26] かわりに [DFN[[CODE[depth]]]] [[属性]]で深さ ([[付番]]) を表現できました。
[SRC[>>25]]

[27] これとは別に [CODE[level[VAR[n]]]] もありました。

[REFS[

- [25] [CITE@en-US[[[DAISY]] ANSI/NISO Z39.86-2002 - The DAISY Consortium]], [TIME[2023-11-23T08:52:40.000Z]] <https://daisy.org/info-help/document-archive/archived-projects/daisy-ansi-niso-z39-86-2002-archived/>

]REFS]

** XHTML2

[9] [[XHTML2]] は最初の[[作業原案]]で [CODE(HTMLe)@en[[[h]]]] [[要素]]と共に
[CODE(HTMLe)@en[[[section]]]] [[要素]]を導入しました。

;; [CITE@en[- XHTML Text Module]] ([TIME[2002-08-06 00:20:43 +09:00]] 版) <http://www.w3.org/TR/2002/WD-xhtml2-20020805/mod-text.html#edef_text_section>

** HTML もどき

[FIG(data)[ [28] [[HTML要素概説]]

:[F[要素名]]:[CODE[section]]
:日付:[TIME[2011-03-31]]
:説明:
[TIME(jp)[2011-03-31]]版[[電子書籍交換フォーマット]]に
[CODE[section]]
がある。
区切りを示すとされ、
属性を使って目次や表紙を表すことができる。
[[XHTML2]] や [[HTML5]] の同名の[[要素]]とは異なる。
:出典:
[REFS[

-
[CITE@ja[[L[電子書籍交換フォーマット標準化プロジェクト 【調査報告書】]]]], 
[DATA(.author)[[[一般社団法人 日本電子書籍出版社協会]]]],
[TIME(.published)[[L[2011 年 3 月 31 日]]][2011-03-31]],
[TIME[2024-08-24T04:48:38.000Z]] <https://dl.ndl.go.jp/view/prepareDownload?itemId=info%3Andljp%2Fpid%2F3525276&contentNo=1>

]REFS]

]FIG]

** HTML5

[FIG(data)[ [29] [[HTML要素概説]]

:[F[要素名]]:[CODE[byline]]
:[F[要素名]]:[CODE[footer]]
:[F[要素名]]:[CODE[section]]
:日付:[TIME[2004-04-07]]
:説明:
[TIME[2004-04-07]]版
[CITE@en-GB-hixie[Web Applications Markup Language 1.0]]
に
[CODE[byline]],
[CODE[footer]],
[CODE[section]]
の構想がある。
[[要素名]]のみで詳細不明。
:出典:
[REFS[

-
[DFN[WA1-20040407]]:
[CITE@en-GB-hixie[Web Applications Markup Language 1.0]], 
[DATA(.author)[[[Opera Software]]]],
[[Ian Hickson]],
[DATA(.status)[[[Working Draft]]]],
[TIME(.published)[7 April 2004][2004-04-07]],
[TIME[2004-04-07T17:39:12.000Z]], [TIME[2024-09-01T05:47:43.261Z]] <http://www.hixie.ch/specs/html/apps/web-apps-1>

]REFS]

]FIG]

[FIG(data)[ [30] [[HTML要素概説]]

:[F[要素名]]:[CODE[byline]]
:[F[要素名]]:[CODE[footer]]
:[F[要素名]]:[CODE[section]]
:[F[要素名]]:[CODE[navigation]]
:[F[要素名]]:[CODE[header]]
:[F[要素名]]:[CODE[post]]
:[F[要素名]]:[CODE[message]]
:[F[要素名]]:[CODE[content]]
:[F[要素名]]:[CODE[h]]
:日付:[TIME[2004-06-02]]
:説明:
[TIME[2004-06-02]]版
[CITE@en-GB-hixie[Web Applications Markup Language 1.0]]
に
[CODE[byline]],
[CODE[footer]],
[CODE[section]],
[CODE[navigation]]
の構想がある。
[[Webアプリケーション]]に出現する構造を表す。
文書ソース注釈に
[CODE[navigation]],
[CODE[header]],
[CODE[footer]],
[CODE[section]],
[CODE[post]],
[CODE[message]],
[CODE[content]],
[CODE[h]]
の構想がある。
:出典:
[REFS[

-
[DFN[WA1-20040602]]:
[CITE@en-GB-hixie[Web Applications Markup Language 1.0]], 
[DATA(.author)[[[Opera Software]]]],
[[Ian Hickson]],
[DATA(.status)[[[Working Draft]]]],
[TIME(.published)[2 June 2004][2004-06-02]],
[TIME[2024-09-01T06:16:51.000Z]], [TIME[2004-06-05T22:07:51.956Z]] <https://web.archive.org/web/20040605213911/http://www.whatwg.org/specs/web-apps/current-work/>

]REFS]

]FIG]

[FIG(data)[ [31] [[HTML要素概説]]

:[F[要素名]]:[CODE[section]]
:[F[要素名]]:[CODE[h1]]
:日付:[TIME[2004-09-23]]
:説明:
[TIME[2004-09-23]]版
[CITE@en-GB-hixie[Web Applications 1.0]]
に
[CODE[section]]
がある。
[CODE[h1]]
と併用するが、 [CODE[h2]] 等も用いることができるとされた。
現行仕様である。
:出典:
[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]

[7]
[CITE@en-US[The WHATWG Blog &#187; Blog Archive &#187; The Road to HTML 5 - Episode 1: the section element]] ([TIME[2008-11-06 10:03:35 +09:00]] 版) <http://blog.whatwg.org/the-road-to-html-5-episode-1-the-section-element>

[32] [CITE@en[FAQ - WHATWG Wiki]], [TIME[2023-10-04T03:59:00.000Z]], [TIME[2024-10-06T07:50:12.390Z]] <https://wiki.whatwg.org/index.php?title=FAQ&oldid=9975#Do_you_have_any_hints_on_how_to_use_.3Csection.3E_and_.3Carticle.3E_and_so_on.3F>

* メモ

[1] [CODE(HTML)[section]] 要素と [CODE(HTML)[div]] 要素の使い分けで迷う予感。 (きちんと文書構造が整ってる文書ならいいんだけど、中途半端だとね。)

[10] [CITE[sectionの使い方とセクション三箇条 - vantguarde - web:g]]
([TIME[2009-09-12 13:02:29 +09:00]] 版)
<http://web.g.hatena.ne.jp/vantguarde/20090911/1252678414>

[11] [CITE[IRC logs: freenode / #whatwg / 20090819]]
([TIME[2009-10-12 17:32:44 +09:00]] 版)
<http://krijnhoetmer.nl/irc-logs/whatwg/20090819#l-960>

[12] [CITE[IRC logs: freenode / #whatwg / 20100428]]
([TIME[2010-05-20 00:44:06 +09:00]] 版)
<http://krijnhoetmer.nl/irc-logs/whatwg/20100428#l-136>

[13] [CITE['''['''whatwg''']''' The real issue with HTML5's sectioning model]]
([TIME[2010-08-03 09:33:56 +09:00]] 版)
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2010-August/027526.html>

[14] [CITE[''''''[''''''whatwg'''''']'''''' WA 1.0 - document outline suggestion]]
( ([TIME[2009-02-26 03:21:49 +09:00]] 版))
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-May/011481.html>

[15] [CITE@en[RFC 5988 - Web Linking]]
( ([TIME[2012-03-22 09:19:11 +09:00]] 版))
<http://tools.ietf.org/html/rfc5988#page-15>

[16] [CITE[Re: status. Re: X11 BROWSER for WWW]]
( ([TIME[2004-05-12 00:03:58 +09:00]] 版))
<http://lists.w3.org/Archives/Public/www-talk/1991SepOct/0003.html>

[FIG(quote)[
[FIGCAPTION[
[18] [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]

> 
> <section class="contentBox">
> 
> <div class="headerWrap">
> <header class="clearfix">
> <h1 class="speech"><span id="__r_article_title__" class="pis_title">【皇室ウイークリー】(番外編)佳子さまお誕生日〈45枚のお写真で振り返るこの1年〉</span></h1>
> <div id="headerMod" class="clearfix">
> <p id="logo"><a href="../../../" title="サイトトップへ戻る"><img src="http://www.sankei.com/apr_news/images/v1/basic/logo_header_news.png" alt="産経ニュース"></a></p>
>

]FIG]

[FIG(quote)[
[FIGCAPTION[
[19] [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]

> 
> <section class="modPhoto clearfix">
> <h3>このニュースの写真</h3>
> <ul class="clearfix"><!--
>

]FIG]

[FIG(quote)[
[FIGCAPTION[
[20] [CITE[【ライブレポート】Kalafina、もっと先へ | Kalafina | BARKS音楽ニュース]]
([[ジャパンミュージックネットワーク株式会社]] 著, [TIME[2015-12-31 14:56:45 +09:00]] 版)
<http://www.barks.jp/news/?id=1000122862>
]FIGCAPTION]

> 
> </div>
> <section class="article-body">
> <div align="center"><img src="http://img.barks.jp/image/review/1000122862/001.jpg" hspace="0" border="0"></div><br>
> Kalafinaのアコースティックライブ<Christmas Premium LIVE 2015 「Kalafina with Strings」>の最終公演が、12月25日に東京・渋谷のBunkamuraオーチャードホールにて開催された。<br>

]FIG]

[FIG(quote)[
[FIGCAPTION[
[21] [CITE[【ライブレポート】Kalafina、もっと先へ | Kalafina | BARKS音楽ニュース]]
([[ジャパンミュージックネットワーク株式会社]] 著, [TIME[2015-12-31 14:57:39 +09:00]] 版)
<http://www.barks.jp/news/?id=1000122862>
]FIGCAPTION]

> 
> <section class="related-news">
> <h2>RELATED NEWS</h2>
> <ul>
> <li>

]FIG]

[FIG(quote)[
[FIGCAPTION[
[22] [CITE@ja[【今日は何の日?】あこぎという駅が開業 | 乗りものニュース]]
([TIME[2015-12-31 15:08:12 +09:00]] 版)
<http://trafficnews.jp/post/47402/>
]FIGCAPTION]

> <div class="article-meta-bottom article-tags">
> tags: <a href="http://trafficnews.jp/tag/%e4%bb%8a%e6%97%a5%e3%81%af%e4%bd%95%e3%81%ae%e6%97%a5%ef%bc%9f/" rel="tag">今日は何の日?</a></div>
> </section>
> <section id="detail">
> 
> <p class="post-excerpt">12月31日、あこぎという駅が開業しました。</p>
>

]FIG]

[FIG(quote)[
[FIGCAPTION[
[23] [CITE@en[RFC 7749 - The "xml2rfc" Version 2 Vocabulary]]
([TIME[2016-02-04 22:54:51 +09:00]] 版)
<https://tools.ietf.org/html/rfc7749#section-2.34>
]FIGCAPTION]

> 
>

]FIG]

[24] [CITE@en[Switch section to div for ready foreview sections to stop linter comp…]]
( ([[nikosandronikos]]著, [TIME[2016-06-07 15:08:53 +09:00]]))
<https://github.com/w3c/svgwg/commit/336c3c4aafb767a8caec591de6087aa7450dd3ac>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Errors

Page name(s)