h1

h1

[1] HTMLhn 要素型群の要素は見出し (heading) です。 見出し要素は、それによって始まる (section) の話題を手短に記述します。

付番 (rank) n は、 HTML 4 をはじめとする IETFW3C の規定する HTML 仕様では 16 が定義されています。

[21] 仕様書:

[12]

状態
W3C 勧告 (h1h6), 非標準 (その他)
名前空間URI
http://www.w3.org/1999/xhtml
局所名
h0, h1, h2, h3, h4, h5, h6, h7, h8, h9 (hheading (見出し) より、 数字付番)
開始タグ
必須
終了タグ
必須
内容モデル
(%inline;)*
出現できる文脈
%block な文脈
属性
属性名属性値既定値説明出典
align揃え位置[HTML4] 非推奨
class[HTML4] %coreattr
datafld欄名[HTML4] 予約
dataformatデータ書式[HTML4] 予約
datasrc%URIデータ源[HTML4] 予約
dir書字方向[HTML4] %i18n
idID一意識別子[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 の日本語版では、 h1h6 各要素の大きさが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"

これが可能なスタイル言語の例としては、 CSS2XSLDSSSL が挙げられます。 (JSSS はどうだろう?)

歴史

hn 要素型群 (SGML)

[25] SGML では一般に古くから見出し (heading) を表す要素型として 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>別の節の内容

HTML への導入

[31] hnHTML の最初期 (おそらく本当に一番最初) から存在する要素型で、 古い仕様書 (例えば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) に由来しているそうです。

h7, h8, ...

[14] h7 は一般的には (次の幻の h8 要素とあわせて) 誤りとされるが、 WebExplorer が実装していることは有名。他にも細々とした実装ではあるらしい。

[105] でも Mosaic にあったのに、なぜ NNWinIE は引き継がなかったのだろう。

[106] W3Olibwww は、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後方互換性のために残したようです。 このうちのcommentlistingplaintextは、libwwwおよび前身のLine Mode Browserの変更履歴に追加された旨の記述がありますから、h7は (記述漏れでなければ) 1991年頃からずっと実装されていたことになります。

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

[10] Semantic Frenzy &#187; XHTML Deluxe ( 版) http://www.prugo.de/blog/xhtml-deluxe/

h7-h10

[17] Mosaic のソースコードによると h7 まで実装されていた模様であります。

[20] n は1〜7がありますと説明したすぐ後の「実例」で、1〜6しか示していない解説が複数ある。ブラウザの表示を見て変だなあと思ったのだろうか。どうして h7 の存在まで疑わなかったのだろう。

[23] Hn 要素型の n は標準の HTML では 16 なんだけど、 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 要素型と紛らわしいですし、しない方が良いでしょう。

  • [10] H0 要素型の存在を信じる人もわずかにいるみたい。すごいなぁ。
  • [11] >>10 は夢のない人でつね
  • [12]>>11 がいいこと言った

[39] http://www.oasis-open.org/cover/nitf-x-dtd.txtNITF というマーク付け言語HTML に語彙を付け足したような感じの XML 応用なんだけど、ここには h1h8 が定義されていました

[42] 流石に H11 以降は見つからないなぁ。

[112] Overview — Portal http://dev.cellml.org/

ここが h7h8 を 使っています。 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

h1h6 が順に1個ずつ使われています。

これが構造的に正しいのかは書いた人以外なんともいえませんが。。。

HTML4

章節構造

[86] CEA-2014-B

DTBook

[45] DTBook には HTML 同様の h1, h2, h3, h4, h5, h6 があります。

[46] level 用の levelhd があります。 <levelhd depth>階数を指定でき、 6 を超えた値も指定できます。

[47] listsidebar 用の hd があります。

[48] 他に図表caption, 文書全体の doctitle, HTML 同様の文書メタ情報としての title があります。

XHTML2 h 要素

[58] XHTML2 の最初の作業原案で従来の h1~h6要素とは別に h 要素が導入されました。 同時に導入された section 要素によって明示された章節見出しを表すものでした。

[61] 新たな h 要素に加えて hn 要素が削除されずに残されていることに対する非難も多く、旧 HTML WG (後の XHTML2 WG) も検討課題に挙げていましたが、仕様自体がそのまま放置され続けました。

[59] Semantic Frenzy &#187; 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 とするのは好ましくないと主張する人もいます。

DTBook

章節構造

HTML5

...

[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 2section という新要素型を導入しています。

[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

[11] OASIS Open Document Format for Office Applications (OpenDocument) Version 1.2 - Part 1: OpenDocument Schema ( 版) http://docs.oasis-open.org/office/v1.2/os/OpenDocument-v1.2-os-part1.html#a5_1_2_text_h_

The text:h element represents a heading in a document.

[55] CNN.co.jp : 世界各地で新テーマパーク、続々開園へ - (1/3) ( 版) http://www.cnn.co.jp/showbiz/35074293.html?tag=top;topStories

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

[56] 今年も来年もアニメはMX! 今年もアニメ攻勢がすごいTOKYO MXの年末年始特番、そして2016年について聞いてみた!!|おたぽる ( 版) http://otapol.jp/2015/12/post-5150.html

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

[75] Scholarly HTML ( 版) https://w3c.github.io/scholarly-html/#article

If the sections require headings that exceed h6, aria-level must be included to indicate depth.

[76] 高速オールSSDレンタルサーバー【ヘテムル】 () https://heteml.jp/

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

[77] Scholarly HTML () https://w3c.github.io/scholarly-html/#article

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.

[78] プロブロガー イケダハヤトさん、新ブログの記事全文をh3タグで囲う - はらですぎ () http://www.haradesugi.com/entry/2016/02/27/080000

記事全体が太字だったので、もしかして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

[89] 見出しレベルに関する疑問 - 猫式Webメモ, https://nekoshiki.hatenadiary.org/entry/20031130/p1