SECTION

section 要素 (HTML)

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

関連

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

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

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

歴史

前史

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

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

HTML4

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

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

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

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

XHTML2

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

HTML5

[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

メモ

[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