前回のブログでは、主にHTMLの見出し要素h1~h6について、W3CのHTML5を対象に見ました。2016年11月勧告のHTML5.1ではこのあたりがかなり変更となっています。今回は、W3CのHTML5.1について見てみます[1]。その前にもう一度用語を整理します。セクションルート:独自のアウトラインを持つことができる。セクションルートのアウトラインはその祖先のアウトラインには寄与しない。セクションルートには次の要素があります。見出しとフッターの範囲を示します。セクション内容の要素には次があります。navh1~h6の見出し要素は、(暗黙またはセクション内容でマークアップされているかに関わらず)セクションの見出しを示します。h1~h6は見出しのランクを示します。ランクによって文書のアウトラインを作ります。section要素はアウトラインを明示化します。次図の左と右では文書のアウトラインは同じです。アウトラインは、アクセシビリティのための支援ツールなどで見出しの重要度を示すのに使うことができます。sections[2]に、セクションと見出しについての詳しい説明があります。この部分がHTML5.1では次のようになりました。「セクションには、セクションのネストレベルと同じランクの見出しを含むことができる。著者はセクションのネストレベルからみて適切な見出しを付けるべきである。ひとつのセクション内容に複数の見出しを付けて、暗黙のセクション生成に頼るのではなく、明示的にセクションを包むことを推奨する。」HTML5では、各section要素の最初に<h1>で見出しを置くと分かりやすいという説明がありました。この他の幾つかのサンプルと共に、敢えなく沈没してしまいました。すると、最初の話に戻りますが、Wordの見出しレベル1の扱いが問題になります。Wordのスタイル機能「見出し1」を使って文書を作成して、HTMLで保存すると、HTMLの構造は次の図の右のようになります。sectionsに書かれた内容に準拠とはならないかもしれません。次の図のようなケースはどうなるのでしょうか?左と右が同じであることは分かります。h1の次にh2が出てくれば、新しいサブセクションが開始されるからです。sectionsによれば、いずれのケースでも新しいセクションが始まることになります。新しいセクションはbodyと同ランクですので、bodyが暗黙に分割されると考えられます。HTML5ではこのことが、サンプルとともに文章として書かれていました[3]。HTML5.1でこのサンプルは削除されてしまいました。セクション化の闇は深い?次は、WHATWAGの仕様をチェックしてみたいと思います[4]。ワンソースマルチユースの課題:HTMLソースのオーサリング問題を改めて考えてみようと。HTMLを手軽に作る方法を再検討します。手軽といえば、まずWordでHTMLを作ることが思いつきます。Word2013のWord文書をHTML形式で保存を試してみる。前回のブログではWordのHTML保存を検討しました。そこで、浮かび上がった1つの検討事項がh1要素の使用方法です。Wordのスタイルで「見出し1」を設定した段落はHTML保存するとh1要素にマップされます。Word文書では見出しスタイルは一般的であり、「見出し1」は結構頻繁に使います。WordでHTMLを作るとh1要素がたくさん出てくる可能性があります。HTMLにおいては、h1要素の使い方には少し注意が必要です。第一にTwitterのログをみますと、どうも、h1要素の使い方にはいろいろ議論があるようです[1]。W3CとWHATWGの主張の違いもあるようです。第二にSEO(検索エンジン最適化)の観点からの注意があります。SEOの本を読みますとh1タグは最上位のタグであり、ページで一回だけ使うようにとされています[2]。SEOの本ではHTML5の仕様という観点よりも、Googleなどの検索エンジンがどのように評価するかという観点です。いうことでこのあたりを掘り下げてみます。最初に、W3CのHTML5仕様[3]をみてみます。HTMLにはh1~h6という見出しランクの要素が規定されています。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つの階層化の方法ができたことになります。content)です。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を見てみましょう。洋他著、株式会社インプレス発行、2015年8月11日)p.114には「h1タグはページ内に1回のみ使用する。CAS記法ではh1~h6がマークアップされたとき、divを生成して明示的にツリー構造を作っています。CAS記法リファレンスの「見出し」の行の例を参照してください。CAS-UBでも同様にランクがジャンプしてもdivの階層変化は1つにしています。ワンソースマルチユースの課題:HTMLソースのオーサリング問題を改めて考えてみようと。HTMLを手軽に作る方法を再検討します。手軽といえば、まずWordでHTMLを作ることが思いつきます。Word2013のWord文書をHTML形式で保存を試してみる。この機会にオンラインストアを少し改善しました。第3巻』を10月下旬発売します。第4版』プリントオンデマンド版発売。技術書典5にも出品しますのでどうぞよろしくお願いします。簡単な解説10月8日(月)「アンテナハウスCAS電子出版」は、『技術書典5』に出典します。『XSL-FOの基礎』画像制作のこと。Word経由でインポートした画像は印刷品質の劣化が激しいため、第2版ではできるだけSVG形式に変更した件。EdgeのEPUB表示機能はなかなか良い。これからはEdgeだと言いたいところですが、しかし、残念な点もあります。FormatterClubセミナーでの、CAS-UBのスライドと動画を公開しました。