h7

h7

[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

付番

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

HTML 4 仕様書によれば、 h1 が最も重要度が高い見出し、 h6 が最も重要度が低い見出しです。

[15] 注意: SGML(SGML宣言および DTD 的) 意味では n は付番とは言えませんが、付番は付番です (開き直り)

[17] Word 9 は 7 を超えると、 classMsoHeading8 のような p, div または li を吐く模様です。 9 まで確認されています。

[18] >>17 Word 10 でも同じ。

[19] 付番を文書ではなく文書群に対するものと考える人も少なくないようですが、 それは誤りです。 (toc.htmlh1 からはじめて、 section1.htmlh2 からはじめて、 section1-subsection2.htmlh3 からはじめて、・・・というような使い方は誤り。)

元々付番は文書の中で使うもので、文書群なんてものは考えられていません。

(しかし想定外なのですから、 文書の一部分を別の文書に持っていった際に付番はそのままにしたようなもの、 と考えるのも悪くはない気がしますね。どうしたものでしょう?)

[20] LaTeXpart とか chapter がなくて section が最上位だったりするのは普通なことですから、 SGMLHTMLh2 くらいから始まっていても悪くはないような気もします。付番の最初は 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). と書かれています。

[82] 付番の破綻例

付番の飛び越し

[9] たとえば

<h1/>
<p>
<h3/>
<p>

のように、 h2 の抜けた HTML文書があります。 HTML 2 や HTML 4 の DTD 的にはこのような文書も妥当 (valid) です。

[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 を使わない) 方法とか、 chaptersection のような名前によるレベル分けではなくて付番を使っている代償なのかなあ。

と思ったのだけど、名前を使ったところで記述内容の意味に引っ張られて chapter の真下に subsection を入れたいという要求はやっぱり出てきそうだ。

[39] >>10 HTML 4.0飛ばすのは良くないとされていたのが HTML 4.01飛ばすのはよくないと考える人もいるに改められたという説がありますが、 誤りです。

見出し要素の応用

目次生成

[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) に由来しているそうです。

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 とするのは好ましくないと主張する人もいます。

見出しとサイト名

[64] Webサイトサイト名見出しではなく、 hn を使うべきではないと主張する人もいました。

[50] >>49 論旨には同意しますが、そこで言われている要素SGML 以来の専門用語としての要素とは違うのでは。

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>