[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 |
[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) に由来しているそうです。
[127] Tags used in HTML, , https://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html
[128] history - Why are h1-h6 different tag names in HTML? - Stack Overflow, https://stackoverflow.com/questions/18263155/why-are-h1-h6-different-tag-names-in-html
[131] EMail Msg <9301142323.AA26924@pixel.convex.com>, , https://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q1.messages/66.html
[132] >>131 の最初の方、
これは hn
の議論ではないのだけど、なので実用例に準ずるものとして逆に興味深い
DanC のメール。
h1
の次に h3
を使っている。
h7
, h8
, ...[14]
h7
は一般的には (次の幻の h8 要素とあわせて) 誤りとされるが、 WebExplorer が実装していることは有名。他にも細々とした実装ではあるらしい。
H7
が実装されていたらしい。他にも Mosaic で実装されていたとの証言あり[105] でも Mosaic にあったのに、なぜ NN や WinIE は引き継がなかったのだろう。
[110] A Guide to the Internet Connection Servers - SG244805.PDF, , http://ps-2.kev009.com/rs6000/redbook-cd/SG244805.PDF#page=26
[111] >>110 この WebExplorer の説明には h6
までしかない。
[114] Webexplorer not recognizing <h4> html tags, , https://groups.google.com/g/comp.os.os2.apps/c/tOTiqO34JYk/m/OKuOXglkLsoJ
I get normal sized text, followed by very large down to small at h6 (h4 works fine too). h7 is the same as h6. If I go to h8 or higher, they are default. h7 is recognized by WE since it appears on its own line. h8 and up are not recognized, as they will all appear on the same line (if that doesn't make sense, try it- then it should).
[106] W3O の libwww は、1993年に、 HTML+ の I-D 00 にある要素型に加えて H7
を追加したとあります。 (後に削除されたので、今はありません。) HTML+ への追加予定があったのかは不明ですが、 W3O 的にとりあえず実装に入れてたということで。: libwww/Library/src/HTMLPDTD.html - view - 2.1 http://dev.w3.org/cvsweb/libwww/Library/src/HTMLPDTD.html?rev=2.1&content-type=text/x-cvsweb-markup
[107] こんなのもあった: www linemode browser changes (tweaks really) <199406020236.VAA02672@austin.BSDI.COM> http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1994q2.messages/749.html
[108] かつて http://www.microsoft.com/windows/ie/ie20html.htm にあった IE2.0 の HTML reference には、 h7
要素型が載っていたそうです。しかし、同時期に M$ の人が書いた IE2 用 DTD にはそれは載っていません。実装されていたのか謎です。HTML-WG Archives -- March 1996 (#57) http://listserv.heanet.ie/cgi-bin/wa?A2=ind9603&L=html-wg&D=0&T=0&P=6694&D=1#MSGHDR-PRE
[109]
>>106
それに対応する変更履歴によると、libwwwの構文解析器をHTML+対応にするにあたって要素型等の情報を書き足したようですが、
HTML+になくて、それまで使われていた (おそらくはlibwww構文解析器でも実装されていた)
comment
, h7
,
html
, xmp
,
listing
, plaintext
は後方互換性のために残したようです。
このうちのcomment
とlisting
とplaintext
は、libwwwおよび前身のLine Mode Browserの変更履歴に追加された旨の記述がありますから、h7
は
(記述漏れでなければ) 1991年頃からずっと実装されていたことになります。
[64] Web Workshop - Cascading Style Sheets in Internet Explorer 4, George Young, , https://web.archive.org/web/20001119085400/http://msdn.microsoft.com/workshop/author/css/CSS-IE4.asp#basics
Perhaps the most notable and immediate effect of using CSS is that the HTML in your documents becomes significantly cleaner as you lose the need to stuff your document with tags whose sole purpose is layout tweaking (what I call "twags"). An extension of this is that, no longer needing to use "twags" such as <FONT FACE=…>, <FONT SIZE=…>, and <FONT COLOR=…>, you may find yourself returning to long-forgotten basic elements like the full range of heading tags (<H1>...<H7>), <STRONG>, <OL>, and such.
[82] Hn Element | Hn Object, InetSDK, , https://web.archive.org/web/20001029190205/http://www.msdn.microsoft.com/workshop/author/dhtml/reference/objects/Hn.asp
Use H1 through H6 to specify different sizes and styles of headings.
[15] NetBeans.jp NetBeans 日本コミュニティー http://www.netbeans.jp/index.htm
<td valign=top colspan=2 height= > <h7> </h7>
なにこれ? (名無しさん 2006-02-12 12:28:12 +00:00)
[17] Mosaic のソースコードによると h7
まで実装されていた模様であります。
[92] >>18 この実装ではなんと h9 まである。 HTML 生成に使うライブラリーだったらしい。
[20] n は1〜7がありますと説明したすぐ後の「実例」で、1〜6しか示していない解説が複数ある。ブラウザの表示を見て変だなあと思ったのだろうか。どうして h7 の存在まで疑わなかったのだろう。
[23] Hn 要素型の n は標準の HTML では 1
〜6
なんだけど、 7
も存在するという根強い信仰がある。
[32] 信仰 (解説や実際に使った文書) だけではなく、実装も存在するからややこしい。有名なところでは IBM WebExplorer が実装していた。 (実装が存在する以上、単なる妄想ではなく独自拡張に分類される。もちろん、実際に信じている人の多くはそんなことは知らず、勘違いなのだろう。その辺が話をややこしくする原因だ。)
[33] 更に、 h8, h9, 果ては h10 まで「存在」しているらしい。 H256
辺りまで実在するのじゃないかと疑いたくなる(w
[36] 「7
以上になると文字の大きさは変わりません。」などという恐ろしい解説まであったりする。なんだかなあ。
[37] font 要素の size 属性の値の取り得る整数値が 7
までであることに由来する勘違いだという説もあるけど、本当にそうなのか不明。 (この命題の否定は、 font/@size
登場以前の H7
の解説を発見すればよいのかな?)
[38] ちなみに Hn 要素型群のことを、他に Hx とか H
とか呼んだりします。但し単に H
と呼ぶのは XHTML 2.0 の h 要素型と紛らわしいですし、しない方が良いでしょう。
[39] http://www.oasis-open.org/cover/nitf-x-dtd.txt の NITF というマーク付け言語は HTML に語彙を付け足したような感じの XML 応用なんだけど、ここには h1〜h8 が定義されていました
[112] Overview — Portal http://dev.cellml.org/
ここが h7
と
h8
を
使っています。 Plone というソフトウェアを使っているので、それについてきた雛形かもしれませんが、
調べてみたもののわかりませんでした
(要素型名で検索できないし)。
(名無しさん 2005-04-11 13:28:11 +00:00)
[113] 《三井住友銀行グループ》プロミス-キャッシング比較・オールナビ ( 版) http://www.cashing-navi.jp/promise.html#bsetHeading76
(cache) 《三井住友銀行グループ》プロミス-キャッシング比較・オールナビ ( 版) http://megalodon.jp/?url=http://www.cashing-navi.jp/promise.html&date=20070802215934
これが構造的に正しいのかは書いた人以外なんともいえませんが。。。
[45]
DTBook には HTML 同様の h1
, h2
, h3
,
h4
, h5
, h6
があります。
[46]
level
用の levelhd
があります。
<levelhd depth>
で階数を指定でき、 6 を超えた値も指定できます。
[47]
list
や sidebar
用の hd
があります。
[48]
他に図表の caption
,
文書全体の doctitle
,
HTML 同様の文書のメタ情報としての title
があります。
[49] 電子書籍交換フォーマットには h9
まであります。
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
とするのは好ましくないと主張する人もいます。
[117] Scholarly HTML, , https://w3c.github.io/scholarly-html/#arialevelexample
[118] >>117 h6
+ aria-level=7
で h7
を表せるとしていた。
[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
[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
[89] 見出しレベルに関する疑問 - 猫式Webメモ, https://nekoshiki.hatenadiary.org/entry/20031130/p1
[122] 提供HTML語法整理表 (, ) https://web.archive.org/web/20071102145850/http://www.csie.ntu.edu.tw/~r91112/myDownload/WEB/html.html
[135] 令和5年だったかな?の HTML Standard の変更は、経緯を見るに、 著者の要望や編集上の便宜とか、実世界のHTML文書の実態の調査などをろくに考慮せずに、 一部実装 (AT 等) の便宜のみを最優先に考慮していて、例の Design Principle の priority 違反だよなあ。
[136] 一昔前の WHATWG だったらこういう無理は通らなかっただろうに、すっかり劣化してしまったなあ。 ノイジーマイノリティーが騒ぎ続ければ採択される、って HTML4 時代と同じじゃないか。