タグ別アーカイブ: h1タグ

HTMLを簡単に作る方法：h1要素の話(2) HTML5.1 (W3C）では、セクションの深さと見出しのランクは同じとなった

投稿日時: 投稿者:
返信

前回のブログでは、主にHTMLの見出し要素h1～h6について、W3CのHTML5を対象に見ました。2016年11月勧告のHTML5.1ではこのあたりがかなり変更となっています。今回は、W3CのHTML5.1について見てみます[1]。

その前にもう一度用語を整理します。
セクションルート：独自のアウトラインを持つことができる。そして、セクションルートのアウトラインはその祖先のアウトラインには寄与しない。セクションルートには次の要素があります。

・body, blockquote, details, fieldset, figure, td

セクション内容
見出しとフッターの範囲を示します。セクション内容の要素には次があります。

・section, article, aside, nav

h1～h6の見出し要素は、（暗黙またはセクション内容でマークアップされているかに関わらず）セクションの見出しを示します。h1～h6は見出しのランクを示します。ランクによって文書のアウトラインを作ります。section要素はアウトラインを明示化します。次図の左と右では文書のアウトラインは同じです。

アウトラインは、アクセシビリティのための支援ツールなどで見出しの重要度を示すのに使うことができます。

4.3.10. Headings and sections[2]に、セクションと見出しについての詳しい説明があります。この部分がHTML5.1では次のようになりました。

「セクションには、セクションのネストレベルと同じランクの見出しを含むことができる。著者はセクションのネストレベルからみて適切な見出しを付けるべきである。ひとつのセクション内容に複数の見出しを付けて、暗黙のセクション生成に頼るのではなく、明示的にセクションを包むことを推奨する。」

HTML5では、各section要素の最初に<h1>で見出しを置くと分かりやすいという説明がありました。この他の幾つかのサンプルと共に、敢えなく沈没してしまいました。

そうすると、最初の話に戻りますが、Wordの見出しレベル1の扱いが問題になります。Wordのスタイル機能「見出し１」を使って文書を作成して、HTMLで保存すると、HTMLの構造は次の図の右のようになります。

これは、そのままではHTML5.1の4.3.10. Headings and sectionsに書かれた内容に準拠とはならないかもしれません。

例えば、次の図のようなケースはどうなるのでしょうか？

左と右が同じであることは分かります。h1の次にh2が出てくれば、新しいサブセクションが開始されるからです。では、h1の次にh1がでてきたとき、h2の次にh1が出てきたときはどうなるんでしょうか？　4.3.10. Headings and sectionsによれば、いずれのケースでも新しいセクションが始まることになります。新しいセクションはbodyと同ランクですので、bodyが暗黙に分割されると考えられます。HTML5ではこのことが、サンプルとともに文章として書かれていました[3]。しかし、HTML5.1でこのサンプルは削除されてしまいました。

セクション化の闇は深い？

次は、WHATWAGの仕様をチェックしてみたいと思います[4]。

[1] HTML 5.1 W3C Recommendation, 1 November 2016
[2] 4.3.10. Headings and sections
[3] HTML5.0 4.3.10.2 Sample outlines
[4] HTML Living Standard — Last Updated 31 March 2017

■連載
(1) ワンソースマルチユースの課題：HTMLソースのオーサリング問題を改めて考えてみようと。
(2) HTMLを手軽に作る方法を再検討します。手軽といえば、まずWordでHTMLを作ることが思いつきます。
(3) Word2013のWord文書をHTML形式で保存を試してみる。その問題点は？
(4) HTMLを簡単に作る方法：h1要素の話(1)（前回）
(5) HTMLを簡単に作る方法：h1要素の話(2) HTML5.1 (W3C）では、セクションの深さと見出しのランクは同じとなった（今回）

HTMLを簡単に作る方法：h1要素の話(1)

投稿日時: 投稿者:
返信

前回のブログではWordのHTML保存を検討しました。そこで、浮かび上がった1つの検討事項がh1要素の使用方法です。

Wordのスタイルで「見出し１」を設定した段落はHTML保存するとh1要素にマップされます。Word文書では見出しスタイルは一般的であり、「見出し１」は結構頻繁に使います。つまり、WordでHTMLを作るとh1要素がたくさん出てくる可能性があります。

HTMLにおいては、h1要素の使い方には少し注意が必要です。第一にTwitterのログをみますと、どうも、h1要素の使い方にはいろいろ議論があるようです[1]。また、W3CとWHATWGの主張の違いもあるようです。

第二にSEO（検索エンジン最適化）の観点からの注意があります。SEOの本を読みますとh1タグは最上位のタグであり、ページで一回だけ使うようにとされています[2]。SEOの本ではHTML5の仕様という観点よりも、Googleなどの検索エンジンがどのように評価するかという観点です。

ということでこのあたりを掘り下げてみます。

最初に、W3CのHTML5仕様[3]をみてみます。HTMLにはh1～h6という見出しランクの要素が規定されています。HTML5の4.3.10 Headings and sectionsを見ますと、h1～h6要素はセクションの見出しとして使うとされています。h1～h6はHTMLのツリー構造上は明示的に階層を作りません。しかし、h1～h6があると暗黙に新しいセクションが始まり、そのセクションは階層を作ることが想定されています。

例えばh1要素に続いて、h2要素があれば、暗黙に新しい下位のセクションができます。そして、h2は新しい下位セクションの先頭の見出しとなります（図）。h1の次にh6が出てくるようなランクが不連続（1⇒6のようなジャンプ）でも暗黙のツリー構造では1階層の変化です[4]。

HTML5でsection要素が導入されました。セクションはsection要素で明示的に階層化できます。そして、section要素で階層構造を作り、そのsection要素の先頭にセクションの見出しとしてh1を置くという方法が仕様書に記載されました。ここで、暗黙の階層化（sectionでマークアップしない）と明示的な階層化（sectionでマークアップする）という2つの階層化の方法ができたことになります。

sectionは見出しが作るセクションの範囲を規定する要素（sectioning content）です。しかし、セクションのルート（sectioning root）ではありません。セクションのルートはblockquote、body、fieldset、figure、tdの4つです。新しいsectionはセクションのルートの子供か、そのsectionの先祖のセクションの一部となります。

仕様書の4.3.10.1、4.3.10.2項に、この2つの方法の関係の取り扱いの例が幾つか出ていますが、複雑でやっかいです。

2016年11月に勧告となった、HTML5.1では削除された機能のリストの中に次の項目があります。

・先頭にh1要素を置いたsection要素を入れ子にしてアウトラインを作る[5]。

このあたりがどうやらHTML5.1で変更になったようですので、HTML5の例をあまり深入りしないで次回はHTML5.1を見てみましょう。

[1] h1要素は複数回使って良いのか!? HTML5.1に関するW3CとWHATWGの主張の違い
[2] 例えば、『いちばんやさしい新しいSEOの教本』（安川　洋他著、株式会社インプレス発行、2015年8月11日）p.114には「h1タグはページ内に1回のみ使用する。」とある。
[3] HTML5 A vocabulary and associated APIs for HTML and XHTML W3C Recommendation 28 October 2014
[4] CAS記法ではh1～h6がマークアップされたとき、divを生成して明示的にツリー構造を作っています。CAS記法リファレンスの「見出し」の行の例を参照してください。CAS-UBでも同様にランクがジャンプしてもdivの階層変化は1つにしています。
[5] Features removed

■連載
(1) ワンソースマルチユースの課題：HTMLソースのオーサリング問題を改めて考えてみようと。
(2) HTMLを手軽に作る方法を再検討します。手軽といえば、まずWordでHTMLを作ることが思いつきます。
(3) Word2013のWord文書をHTML形式で保存を試してみる。その問題点は？
(4) HTMLを簡単に作る方法：h1要素の話(1)（今回）
(5) HTMLを簡単に作る方法：h1要素の話(2) HTML5.1 (W3C）では、セクションの深さと見出しのランクは同じとなった（次回）