[3] section 要素は、文章の章節を表します。

関連

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

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

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

歴史

前史

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

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

[36] HTML要素概説
要素名
section
日付
説明
付の Dan Connolly の www-talk への投稿の DTD>>34 に、 section がある。 この時点ではまだ body がなく、 最外 section が現在の body のように使われる。 >>33 しかしこの翌月の DTD では section は使われなくなり、 body が導入されることになる。
出典
  • [33] MIME as a hypertext architecture, , , , https://lists.w3.org/Archives/Public/www-talk/1992MayJun/0020.html
注釈
  • [34] 当時の Dan Connolly は、 SGML と MIME を活用した HTML の再構成を模索していた。 この DTD は HTML を SGML DTD として記述した最古のものだが、 その後の HTML DTD と違って当時の実際の HTML に忠実ではない。 SW:HTML2
[216] HTML要素概説
要素名
group
日付
説明
版 HTML+ DTD に group がある。 HTML+19930713 現在の section に当たる。

HTML4

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

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

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

[27] これとは別に leveln もありました。

  • [25] DAISY ANSI/NISO Z39.86-2002 - The DAISY Consortium, https://daisy.org/info-help/document-archive/archived-projects/daisy-ansi-niso-z39-86-2002-archived/

XHTML2

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

- XHTML Text Module ( 版) http://www.w3.org/TR/2002/WD-xhtml2-20020805/mod-text.html#edef_text_section

HTML もどき

[28] HTML要素概説
要素名
section
日付
説明
版電子書籍交換フォーマットに section がある。 区切りを示すとされ、 属性を使って目次や表紙を表すことができる。 XHTML2 や HTML5 の同名の要素とは異なる。
出典
  • 電子書籍交換フォーマット標準化プロジェクト 【調査報告書】, , , https://dl.ndl.go.jp/view/prepareDownload?itemId=info%3Andljp%2Fpid%2F3525276&contentNo=1

HTML5

[29] HTML要素概説
要素名
byline
要素名
footer
要素名
section
日付
説明
版 Web Applications Markup Language 1.0 に byline, footer, section の構想がある。 要素名のみで詳細不明。
出典
  • WA1-20040407: Web Applications Markup Language 1.0, , Ian Hickson, Working Draft, , , http://www.hixie.ch/specs/html/apps/web-apps-1
[30] HTML要素概説
要素名
byline
要素名
footer
要素名
section
要素名
navigation
要素名
header
要素名
post
要素名
message
要素名
content
要素名
h
日付
説明
版 Web Applications Markup Language 1.0 に byline, footer, section, navigation の構想がある。 Webアプリケーションに出現する構造を表す。 文書ソース注釈に navigation, header, footer, section, post, message, content, h の構想がある。
出典
  • WA1-20040602: Web Applications Markup Language 1.0, , Ian Hickson, Working Draft, , , https://web.archive.org/web/20040605213911/http://www.whatwg.org/specs/web-apps/current-work/
[31] HTML要素概説
要素名
section
要素名
h1
日付
説明
版 Web Applications 1.0 に section がある。 h1 と併用するが、 h2 等も用いることができるとされた。 現行仕様である。
出典
  • WA1-20040923: Web Applications 1.0, , Ian Hickson, Working Draft, , , https://web.archive.org/web/20041009144718/http://whatwg.org/specs/web-apps/current-work/

[7] The WHATWG Blog » Blog Archive » The Road to HTML 5 - Episode 1: the section element ( 版) http://blog.whatwg.org/the-road-to-html-5-episode-1-the-section-element

[32] FAQ - WHATWG Wiki, , 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] section 要素と div 要素の使い分けで迷う予感。 (きちんと文書構造が整ってる文書ならいいんだけど、中途半端だとね。)

[10] sectionの使い方とセクション三箇条 - vantguarde - web:g ( 版) http://web.g.hatena.ne.jp/vantguarde/20090911/1252678414

[11] IRC logs: freenode / #whatwg / 20090819 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20090819#l-960

[12] IRC logs: freenode / #whatwg / 20100428 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20100428#l-136

[13] [whatwg] The real issue with HTML5's sectioning model ( 版) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2010-August/027526.html

[14] [whatwg] WA 1.0 - document outline suggestion ( ( 版)) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-May/011481.html

[15] RFC 5988 - Web Linking ( ( 版)) http://tools.ietf.org/html/rfc5988#page-15

[16] Re: status. Re: X11 BROWSER for WWW ( ( 版)) http://lists.w3.org/Archives/Public/www-talk/1991SepOct/0003.html

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

<section class="contentBox">

<!-- part header -->

<div class="headerWrap">

<header class="clearfix">

<h1 class="speech"><!-- title --><span id="__r_article_title__" class="pis_title">【皇室ウイークリー】(番外編)佳子さまお誕生日〈45枚のお写真で振り返るこの1年〉</span><!-- title end --></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>

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

<section class="modPhoto clearfix">

<h3>このニュースの写真</h3>

<ul class="clearfix"><!--

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

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

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

<section class="related-news">

<h2>RELATED NEWS</h2>

<ul>

<li>

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

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

<!-- #article-meta --></section>

<section id="detail">

<!-- ***** 本文ここから ***** -->

<p class="post-excerpt">12月31日、あこぎという駅が開業しました。</p>

[23] RFC 7749 - The "xml2rfc" Version 2 Vocabulary ( 版) https://tools.ietf.org/html/rfc7749#section-2.34

[24] Switch section to div for ready foreview sections to stop linter comp… ( (nikosandronikos著, )) https://github.com/w3c/svgwg/commit/336c3c4aafb767a8caec591de6087aa7450dd3ac