[1] HTML の
hn
要素型群の要素は見出しです。
見出し要素は、それによって始まる節の話題を手短に記述します。
付番 n は、 HTML 4 をはじめとする
IETF や
W3C
の規定する HTML
仕様では 1
〜6
が定義されています。
[21] 仕様書:
h1
〜h6
),
非標準 (その他)http://www.w3.org/1999/xhtml
h0
,
h1
, h2
,
h3
, h4
, h5
,
h6
, h7
,
h8
, h9
(h
は heading
(見出し) より、 数字は付番)
(%inline;)*
%block
な文脈属性名 | 属性値 | 既定値 | 説明 | 出典 |
align | 揃え位置 | [HTML4] 非推奨 | ||
class | 級 | [HTML4] %coreattr | ||
datafld | 欄名 | [HTML4] 予約 | ||
dataformat | データ書式 | [HTML4] 予約 | ||
datasrc | %URI | データ源 | [HTML4] 予約 | |
dir | 書字方向 | [HTML4] %i18n | ||
id | ID | 一意識別子 | [HTML4] %coreattr | |
lang | %LanguageCode | (継承) | 自然言語 | [HTML4] %i18n |
xml:lang | %LanguageCode | (継承) | 自然言語 | [XHTML1] |
last_modified | 非標準 | |||
onclick | [HTML4] %events | |||
ondblclick | [HTML4] %events | |||
onkeydown | [HTML4] %events | |||
onkeypress | [HTML4] %events | |||
onkeyup | [HTML4] %events | |||
onmousedown | [HTML4] %events | |||
onmouseout | [HTML4] %events | |||
onmouseover | [HTML4] %events | |||
onmouseup | [HTML4] %events | |||
personal_toolbar_folder | 非標準 | |||
style | スタイル情報 | [HTML4] %coreattr | ||
seqnum | 章番号 | 非標準 | ||
title | %Text | 注釈的題 | [HTML4] %coreattr |
[14] 付番 n (注 >>15) は、
HTML 4 をはじめとする
IETF や
W3C
の規定する HTML
仕様では 1
〜6
が定義されています。
HTML 4 仕様書によれば、
h1
が最も重要度が高い見出し、
h6
が最も重要度が低い見出しです。
[15] 注意: SGML 的 (SGML宣言および DTD 的) 意味では n は付番とは言えませんが、付番は付番です (開き直り)。
[17]
Word 9 は 7
を超えると、 class
が MsoHeading8 のような p
, div
または li
を吐く模様です。
9
まで確認されています。
[19]
付番を文書ではなく文書群に対するものと考える人も少なくないようですが、
それは誤りです。
(toc.html は h1
からはじめて、
section1.html は h2
からはじめて、
section1-subsection2.html は h3
からはじめて、・・・というような使い方は誤り。)
元々付番は文書の中で使うもので、文書群なんてものは考えられていません。
(しかし想定外なのですから、 文書の一部分を別の文書に持っていった際に付番はそのままにしたようなもの、 と考えるのも悪くはない気がしますね。どうしたものでしょう?)
[20]
LaTeX で part
とか chapter
がなくて
section
が最上位だったりするのは普通なことですから、
SGML や
HTML で h2
くらいから始まっていても悪くはないような気もします。付番の最初は
SGML
的には規定されていませんし。
やっぱり XHTML 2 のような見出しの水準に中立なモデル化が何も考えずに済むので便利でしょうかね。
[32] HTML が 1〜6 を標準として持っているのは >>31 の通り歴史的な事情で、それ以上の深い理由はありません。 良い文書は 1〜4 程度に収めるべきだとか、 実際には 1〜3 くらいしか見かけないなあとか、 でもでかい文書のためには 1〜9 くらいあった方が良いとか、 色々言われてきましたが結局上限を変える程の根拠も無く、 現在に至っています。
[33]
HTML 4 DTD の注釈 (参考) には
There are six levels of headings from H1 (the most important) to H6 (the least important).
と書かれています。
[9] たとえば
<h1/> <p> <h3/> <p>
のように、 h2
の抜けた HTML文書があります。
HTML 2 や
HTML 4 の
DTD 的にはこのような文書も妥当です。
[10] しかしながら、見出しの水準は飛ばすべきではありません RFC 1866 5.4. し、飛ばすのを良く思わない人もいます HTML 4。 飛ばすことによって他の形式への変換に支障をきたすこともあります RFC 1866 5.4.。
[36] h要素について考える -アクセシビリティ・アーキテクチャー技術開発メモ http://www.infoaxia.com/tools/blog/archives/2005/04/hx.html
この文書では、見出しの付番を飛ばしたくなる理由の一つとして、
文書が意味的に記述する内容における構造
(この例では、会社組織の部
や課
のような構造)
と文書の構造を整合させたい
(が、課
がない部
があったりする)
という要求を挙げています。
心情的には理解できますが、付番の本来の semantics
(章
や節
のような単純な入れ子関係を表すに過ぎない。)
からすると無理にあわせようとする必要は無いわけでして。
メモ: データ構造なら
<組織> <部> <課> <社員/> </課> </部> <部> <社員/> </部> </組織>
のように付番を飛ばしたようなことをしても問題ないのですが、 HTML は文書マーク付け言語ですからね。
[38] >>37 のように記述内容の意味に引っ張られてしまうのは、
やっぱり HTML の hn
によって章節を暗示する (section
を使わない) 方法とか、 chapter
や section
のような名前によるレベル分けではなくて付番を使っている代償なのかなあ。
と思ったのだけど、名前を使ったところで記述内容の意味に引っ張られて chapter の真下に subsection を入れたいという要求はやっぱり出てきそうだ。
[39]
>>10 HTML 4.0 で飛ばすのは良くない
とされていたのが
HTML 4.01 で飛ばすのはよくないと考える人もいる
に改められたという説がありますが、
誤りです。
[13] UA は、 見出し要素を使って文書の目次を自動生成することができます HTML 4。 実際に、文書中の見出し一覧を表示して頁内を移動できる機能を持つ WWWブラウザや、文書群の総合目次のようなものを作ることができるソフトウェアがあったりします。
[16] 視覚ブラウザは、通常、重要度の高い (付番の小さい) 見出しをより低い (大きい) 見出しよりも大きく描画します HTML 4。
[2] 古い mosaic の日本語版では、 h1
〜h6
各要素の大きさが6段階であるべきなのに、
3段階にしかならないことがあったそうです。
[24] 古い時代の典型レンダリング RFC 1866 5.4.:
要素型 | 太字 | 斜体 | 大きさ | 左右余白 | 上下余白 |
h1 | ○ | × | 非常に大きい | 中央寄せ | 1,2行 |
h2 | ○ | × | 大きい | 左揃え | 1,2行 |
h3 | × | ○ | 大きい | 十分字下げ | 1,2行 |
h4 | ○ | × | 普通 | h3 より字下げ | 1行 |
h5 | × | ○ | 普通 | h4 程度字下げ | 上1行 |
h6 | ○ | × | 普通 | h5 より字下げ | 上1行 |
[8] HTML 自体では、 見出しに自動的に章節番号を与えることはできません。 しかし、そのような UA は存在しますし、 スタイル言語を併用することで著者がこれを制御することも可能です。 HTML 4 IW:HTML4:"struct/global.html#idx-numbered_headings"
これが可能なスタイル言語の例としては、 CSS2 や XSL や DSSSL が挙げられます。 (JSSS はどうだろう?)
hn
要素型群 (SGML)[25] SGML
では一般に古くから見出しを表す要素型として
hn
がよく使われています。
付番は 1
から始まって数個程度で、
h0
が使われることもたまにあります。
[26] LaTeX 式の chapter, subsection
のような名前による区分とは異なり、
何も考えずに番号で深さを表現できる点で優れています
(と考えた人が hn
式見出し・章節構造を採用しています)。
[27] 採用例:
[28] 純粋見出し方式: hn
はその名の通り、
見出しそのものを表します。見出しを含む章節は、
他の要素型によって明示・暗示される場合もあれば、
SGML
的には表現されずにその応用独自の方法や発見的方法でのみ得られる場合もあります
(ISO-HTML 準備用は前者、標準の HTML は後者)。
例:
<h1>大見出し <p>章の内容 <h2>小見出し <p>節の内容 <h2>小見出し <p>別の節の内容
要素型定義の例:
<!ENTITY % Heading "h1 | h2 | h3 | h4"> <!ELEMENT (%Heading) - o %Inline;> <!ELEMENT p - o %Flow; -(%Heading)>
[29] 章節開始位置方式: hn
は見出しの開始を表すタグとして使いますが、
実はその章全体を含む要素になっています。
例:
<h1>大見出し <p>章の内容 <h2>小見出し <p>節の内容 <h2>小見出し <p>別の節の内容
この例のように、文書実現値だけを見れば >>28 の場合と同じですが、 次のような要素型定義を使うと、異なった文書木が得られます。
要素型定義の例:
<!-- Section --> <!ELEMENT h1 - o (h1t, (%Block)*, h2*)> <!ELEMENT h2 - o (h2t, (%Block)*, h3*)> <!ELEMENT h3 - o (h3t, (%Block)*, h4*)> <!ELEMENT h4 - o (h4t, (%Block)*)> <!-- Proper Heading --> <!ELEMENT h1t o o %Inline> <!ELEMENT h2t o o %Inline> <!ELEMENT h3t o o %Inline> <!ELEMENT h4t o o %Inline>
この要素型定義を使うと、先の例は次のように解釈されます。
<h1><h1t>大見出し </h1t><p>章の内容 </p><h2><h2t>小見出し </h2t><p>節の内容 </p></h2><h2><h2t>小見出し </h2t><p>別の節の内容 </p></h2></h1>
[30] 付番方式: 深さを要素型名の番号で表す際の宣言とマークの便宜のために、 SGML には付番という機能があります。 (折角用意されているのに optional な機能なのでほとんど使われていません。)
例:
<h1>大見出し <p>章の内容 <h2>小見出し <p>節の内容 <p>同じ節の内容 <h>小見出し <p>別の節の内容
実は >>28-29 と同じ例でも良いのですが、 付番の省略の機能を使うように少し変えてみました。
要素型定義の例:
<!ELEMENT (h | p) 1 - o %Inline> <!ELEMENT (h | p) 2 - o %Inline> <!ELEMENT (h | p) 3 - o %Inline> <!ELEMENT (h | p) 4 - o %Inline>
先の例は、次のように解釈されます。
<h1>大見出し <p1>章の内容 <h2>小見出し <p2>節の内容 <p2>同じ節の内容 <h2>小見出し <p2>別の節の内容
[31] hn
は
HTML の最初期
(おそらく本当に一番最初) から存在する要素型で、
古い仕様書 (例えば1992年1月のもの
http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1992.messages/0.html)
によれば、 CERN SGML Guide, ひいては AAP tag set
(後の ISO/IEC 12083) に由来しているそうです。
h
要素[58] XHTML2 の最初の作業原案で従来の h1
~h6
各要素とは別に h
要素が導入されました。
同時に導入された section
要素によって明示された章節の見出しを表すものでした。
[61] 新たな h
要素に加えて hn
要素が削除されずに残されていることに対する非難も多く、旧 HTML WG
(後の XHTML2 WG) も検討課題に挙げていましたが、仕様自体がそのまま放置され続けました。
[59] Semantic Frenzy » Headings in XHTML 2 (2007-08-14 22:15:05 +09:00
版) http://www.prugo.de/blog/headings-in-xhtml-2/
[60]
HTML5 に対しても h
要素を導入するべきだとする意見がありましたが、
h1
要素が意味的には h
要素と同じであり、かつ後方互換性もあるとして却下されています。
[3] hn
要素型群が見出しであるとしながらも、
文字の大きさを変えるのに使うこともできると説明している文章もあります。
後者の間違った用法しか説明しない完璧な不思議解説もいやらしいですが、
この種のもなあ。
[4] 見出し要素型群がまともに使ってもらえなくなったのって、 絶対 NN の既定のスタイルシート (もしかしたら mosaic のも。) で見出しの大きさがはちゃめちゃだった影響が8割くらいありますよね。
見出し水準1は馬鹿でかいし、 水準4以下は普通の文字よりも小さい。 普通の文字より小さい見出しがいったいどこの世の中にありますか。
であるからにして、 NN が登場してから
CSS が普及するまで、
見出しタグを使うとウェブ頁が正視に堪えられなくなるという状態だったわけですよ。
ふと目をそらせば font
タグが漂っている。どっちが常識的な選択かは明らかでしょ。
[5] もちろん、 >>4 は昔話であって、 現代でありながら見出しを正しく使っていない文書の著者は間抜けですよ。
[6] (よくわからないけど仮に mosaic でも NN みたいにまともじゃない見出しの文字の大きさだったとして、) mosaic の多く (多分、ある時点よりあとの版) は利用者設定のスタイルシートを実装していて、 見出しの文字の大きさも自分で指定できたと思うのですけど、 できたからといってちゃんとまともな大きさにしていた人がどれだけいたか。
[35]
検索円陣 spam:
hn
は他よりも重みが大きいと推測して、
SEO と称して hn
を検索円陣spam
行為に使い出す阿呆な人が出てきました。
その後、 hn
は検索円陣spam
に使われるので検索円陣は減点すると推測して、
SEO と称して hn
は全く使わないのが良いなどと言い出す阿呆な人が出てきました。
[54] スクリーンリーダーなど特定の利用者エージェントのレンダリングを根拠に、
サイト名は最初にレンダリングされるべき重要な情報ではないとして、
サイト名を h1
とするのは好ましくないと主張する人もいます。
[64] Webサイトのサイト名は見出しではなく、 hn
を使うべきではないと主張する人もいました。
2007-07-13 21:49:00 +09:00
版) http://www.akatsukinishisu.net/wiki.cgi?%B8%AB%BD%D0%A4%B7%CD%D7%C1%C7%A4%CB%B4%D8%A4%B9%A4%EB%B5%C4%CF%C02007-07-05 03:10:29 +09:00
版) http://www.akatsukinishisu.net/itazuragaki/html/h1_is_the_most_important.html2007-07-13 22:15:58 +09:00
版) http://nanto.asablo.jp/blog/2007/07/11/16460062007-07-13 22:38:26 +09:00
版) http://my-chunqiu.cocolog-nifty.com/blog/2007/07/html_64a8.html2007-07-09 20:54:42 +09:00
版) http://mynotes.jp/blog/2007/07/h1_is_document_title2007-07-12 05:58:32 +09:00
版) http://mynotes.jp/blog/2007/07/h1_is_document_title22007-07-13 22:25:36 +09:00
版) http://www.rusica.net/note/2007/07/05/h1.html2007-07-09 21:00:00 +09:00
版) http://ryus.s21.xrea.com/w/item/9282007-07-09 21:00:00 +09:00
版) http://ryus.s21.xrea.com/w/item/9282007-07-13 07:00:00 +09:00
版) http://ryus.s21.xrea.com/w/item/929[50] >>49 論旨には同意しますが、そこで言われている要素
は
SGML 以来の専門用語としての要素とは違うのでは。
[22] 見出しを含む簡単な文書片 RFC 1866 5.4.
<H1>This is a heading</H1> Here is some text <H2>Second level heading</H2> Here is some more text.
[34] h6
の次のレベルの見出しを使いたいが、
非標準の h7
要素型は使いたくないので
div
で代用する例
<h6>§1.2.3.4.5 <code>a</code> 要素型</h6> <p><code>a</code> 要素は<dfn>アンカー</dfn>を表します。</p> <div class="h7">§1.2.3.4.5.1 <code>href</code> 属性</div> <p><code>a</code> 要素の <code>href</code> 属性には<dfn>終点アンカー</dfn> (リンク先) の URI を指定します。</p>
一般論として、章節入れ子構造があまりに深い文章は良い文章とは言えません。 それでも HTML で標準で用意されているレベル 6 より更に細かい節が存在する文書を扱わなければならないこともあります。
XHTML 1 なら適当な外部の名前空間で定義されているレベル7
の見出しに使い得る要素型を探してきて使うのが妥当な線ですが、
拡張可能でない HTML で標準の要素型だけを使うとなると、
この例のように div
要素型を使い、
class
属性で補足することになります。
(そうはいっても、 class
属性を指定しても第7レベル見出し
という semantics を記述したことにはなりませんから、特定のスタイル・シートを使ったレンダリングなど限られた範囲でしか活用できないのは残念なところです。)
[7] 見出し要素は、節の始まりを暗示しているのでありますが、 DTD 的あるいは XML 的にはどこからどこまでが節なのか明示することまではできません。
HTML 4 仕様書は、
div
要素を使ってこれを明示する例を示しています。
ちなみに、 XHTML 2 は section
という新要素型を導入しています。
[40] Blogの見出しのアンカー - WebStudio http://www.d-toybox.com/studio/weblog/show.php?mode=single&id=2005091901
見出し全体が始点アンカーになっている時って、 その記事自体を指している場合、 参照記事を指している場合、 関連記事を指している場合 (例: YukiWiki) などがあってばらばらなのも困る。 (名無しさん [sage] 2005-09-19 02:40:44 +00:00)
[41] 見出しに章番号をつけない場合、まぎらわしいので、 見出しの最初に算用数字を使わない方がいいです。 数字から始めたい時は、できれば漢数字を使うのがいいと思います。 (名無しさん)
[57]
Experimental Evaluation of Usability and Accessibility of Heading Elements (1) (2007-05-08 08:27:52 +09:00
版) http://www.comm.twcu.ac.jp/~nabe/2007/W4A2007/
(名無しさん 2007-05-11 01:09:44 +00:00)
[53] Web Applications 1.0 r6925 Add a note about <li><h1>.Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=14486 ( ( 版)) http://html5.org/tools/web-apps-tracker?from=6924&to=6925
[62] (X)HTML5 Tracking ( 版) http://html5.org/tools/web-apps-tracker?from=3802&to=3803
[63] IRC logs: freenode / #whatwg / 20100601 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20100601
[65] IRC logs: freenode / #whatwg / 20110411 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20110411
[66] Web Applications 1.0 r6402 <h1> is allowed to have its default role. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=6401&to=6402
[67] Web Applications 1.0 r7241 Make the outline algorithm handle implied headings better. Really this should just be rewritten to be clearer... ( ( 版)) http://html5.org/tools/web-apps-tracker?from=7240&to=7241
[68] IRC logs: freenode / #whatwg / 20121024 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20121024
[69] IRC logs: freenode / #whatwg / 20130215 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20130215#l-385
[70] Re: status. Re: X11 BROWSER for WWW ( ( 版)) http://lists.w3.org/Archives/Public/www-talk/1991SepOct/0003.html
[71] Re: status. Re: X11 BROWSER for WWW ( ( 版)) http://lists.w3.org/Archives/Public/www-talk/1991SepOct/0003.html
[72] WWW-Talk Jan-Mar 1993: HTML todo list ( ( 版)) http://1997.webhistory.org/www.lists/www-talk.1993q1/0043.html
[73] changed advice on use of h1 elements · 556da56 · w3c/html · GitHub ( ( 版)) https://github.com/w3c/html/commit/556da56c44a2be0cabb9eccbe51fe583fcdf4332
[74] ThePacielloGroup/html5-h ( ( 版)) https://github.com/ThePacielloGroup/html5-h
The text:h element represents a heading in a document.
<div id="leaf-related" class="cbox-content row">
<h4 class="cbox-title headline-mid">こんな話題も</h4>
<ul class="bullet ggt">
<li>
<h3>
<a href="http://www.cnn.co.jp/photo/35074306.html" data-tag="mcol;relStories">写真特集:魅惑のテーマパークが続々登場</a>
<span class="datetime">12/30</span>
<img src='/media/cnn/images/icons/icon_photo.png' class='story-icon'>
</h3>
</li>
<li>
<h3>
<a href="http://www.cnn.co.jp/business/35074255.html" data-tag="mcol;relStories">高さ1キロ、世界一のビル建設へ予算確保 サウジ</a>
<span class="datetime">12/01</span>
<img src='/media/cnn/images/icons/icon_video.png' class='story-icon'>
</h3>
</li>
<li>
<h3>
<a href="http://www.cnn.co.jp/showbiz/35071503.html" data-tag="mcol;relStories">米ディズニーランド、年間パスを大幅値上げ 最大12万円に</a>
<span class="datetime">10/06</span>
</h3>
</li>
<p class="smallFont"><span class="split">・</span>関連記事</p>
<ul>
<li><h2><a href="http://otapol.jp/2015/12/post-4981.html">「これは事件です…!」 OVA『ガルパン』地上波放送決定! 年末年始はTOKYO MXがアツすぎる!!</a></h2><div><a href="http://otapol.jp/2015/12/post-4981.html"><img src="http://otapol.jp/assets_c/2015/12/1512_garupan-thumb-60xauto-14710.jpg" alt="「これは事件です…!」 OVA『ガルパン』地上波放送決定! 年末年始はTOKYO MXがアツすぎる!!" width="60"></a></div></li>
<li><h2><a href="http://otapol.jp/2015/11/post-4508.html">「アメの先端をペロペロ…」“AV出演疑惑”元テレビ愛知・松本圭世アナがTOKYO MXで華麗なる復活!</a></h2><div>
If the sections require headings that exceed h6, aria-level must be included to indicate depth.
<h1 id="top-h1">
<svg viewBox="0 0 960 55">
<!-- Gradient -->
<text text-anchor="left" x="0%" y="50%" dy=".4em" class="svg-text white">
マルチドメイン無制限で、複数サイト運営に。
</text>
</svg>
<span class="text-normal">オールSSD・大容量256GBのレンタルサーバー。</span>
<p class="text-spec"><span class="spec-cap">容量</span>256<span class="spec-unit">GB</span> <span class="spec-cap">月額</span>1,000<span class="spec-unit">円〜(税抜)</span></p>
</h1>
Any number of section elements may be listed within the article at arbitrary depths, but each section must begin with an hx element, indicating a numbered section in the article. If the sections require headings that exceed h6, aria-level must be included to indicate depth.
記事全体が太字だったので、もしかしてstrongタグで囲ってる?と思ってソースを見てみたら、なんとh3タグで本文をすべて囲っていました。
[79] 記事中の見出しから目次を自動的に作成する「目次記法」を追加しました - はてなブログ開発ブログ () http://staff.hatenablog.com/entry/2015/09/09/152158
[80] Update index.html (stevefaulkner著, ) https://github.com/w3c/html-aam/commit/ee3f324906a3d5a7470f71661294c523c79dc617
[81] specified mapping of h1-h6 does not reflect implementations · Issue #116 · w3c/html-aam () https://github.com/w3c/html-aam/issues/116
[83] Fix typo: "header element" to "heading element" (kbav著, ) https://github.com/w3c/csswg-drafts/commit/7507d61f5f8e247b1ddb1e7a1b278cd1a26754fb
[84] Fix typo: "header element" to "heading element" by kbav · Pull Request #2636 · w3c/csswg-drafts () https://github.com/w3c/csswg-drafts/pull/2636
[85] Heading levels — Anne’s Blog () https://annevankesteren.nl/2019/10/heading-levels