HTML5アウトラインアルゴリズムが構造に与える影響

[[91338]]

HTML5 がリリースされてから長い時間が経ちますが、日々の仕事や個人の Web サイトに HTML5 を適用したいと考える人が増えています。人々は、おそらく自分自身に満足しているため、セクション、記事、アサイド、ナビなどの新しいタグの使用にますます慣れてきています。これらのラベルを複数の観点から理解しないと、さらに混乱した状況に陥る可能性があります。 HTML のアウトラインアルゴリズムは非常に重要なエントリポイントです。

まず 2 つの概要を見てみましょう。

これら2つは私の初期の作品です。当時は、特に2番目の構造をうまく書き、HTML5のタグも使って、新しい世界に足を踏み入れたと思っていました。 HTML アウトラインアルゴリズムを確認した後、これらのページをテストしましたが、本当にひどいものでした。最初のタイトルが紛らわしいのは言うまでもありませんが、「クリエイティブラインナップ」は実際には「ユーザーコメント」に従属しているのでしょうか? 2 番目についても、話すのは難しいです。名前のないものは一体何なのでしょうか?しかし、前進するためには常に辛い歴史を乗り越えなければなりません。

他の人がリファクタリングしたページアウトラインをいくつか見てみましょう。

視覚障害のあるユーザーで、これらの Web ページを閲覧するためにスクリーンリーダーに頼る必要があると想像してください。リーダーは階層的な方法で Web ページを解釈します。上記の Web ページのうち、必要な情報を取得するのに最も簡単だと思うのはどれですか。おそらく、この比較の後、誰もがアウトラインアルゴリズムが何であるかを知りたいと思うでしょう。

HTML アウトラインアルゴリズムとは何ですか?

アウトラインアルゴリズムにより、ユーザーエージェントは Web ページから情報構造の目次を生成し、ユーザーにページの概要をすばやく提供できます。書籍、PDF、ヘルプドキュメントなどと同様に、明確なディレクトリ構造があるため、ユーザーは必要なコンテンツを簡単に見つけることができます。適切に構成されたアウトラインは、検索エンジンの最適化に適しているだけでなく、スクリーンリーダーを使用して Web を閲覧する視覚障害のあるユーザー (または弱視のユーザー) にとっても大きな助けになります。

ヘルプドキュメントのディレクトリ構造は次のとおりです。

すべてのページにはアウトラインがあります。Web ページのアウトラインを理解するために、簡単な例から始めましょう。 8月のおすすめ映画をテーマにした映画紹介ページを作りたいとします。ページ構造は次のようになります。

 1. 8月のおすすめ映画
  1. 国内映画
    1. 4人
    2. 検索
  2. 外国映画
    1. アイス・エイジ4
    2. 脱出

HTML4以前では、アウトラインを生成するためにhn(h1~h6)を使用していました。 HTML5 では、section、article、aside、nav などの新しいノード要素 (セクションコンテンツ) が導入され、いくつかの新しいルールが追加されています。これらについては後で詳しく説明します。

#p#

hn 生成されたアウトライン

おそらく HTML4 の構造は次のようになります。

 <div>   
   < h1 > 8月のおすすめ映画</ h1 >  
   < h2 >国内映画</ h2 >  
   < h3 > 4つ</ h3 >  
   < p >フォーとは… </ p >  
   < h3 > 《検索》 </ h3 >  
   < p >検索について.. </ p >  
   < h2 >外国映画</ h2 >  
   < h3 >アイスエイジ4 </ h3 >  
   < p >アイス エイジ 4 について.. </ p >  
   < h3 > 《脱出》 </ h3 >  
   < p >エスケープとは… </ p >  
   < p >上記のコンテンツはXunlei Kankanによって提供されています</ p >  
 <div>

ウェブページのアウトラインはタイトルの階層によって生成されていることがわかります。

このコードのアウトラインを確認したい場合は、Geoffrey Sneddon が作成したアウトラインツール Outliner を試してみてください (強くお勧めします)。ファイルをアップロードしてコードスニペットを入力できます。オンライン Web ページのアウトラインを表示する場合は、ブラウザにプラグインをインストールできます: Chrome: HTML5 Outliner (推奨) / Web Devoloper、Firefox: Web Devoloper、Opera: HTML5 Outliner。（HTML5 アウトライナーでは中国語の文字は文字化けして表示されるため、テスト時には英語に切り替えることをお勧めします。ブラウザプラグインでは中国語の文字を表示できます）

各見出しは暗黙のセクションを生成します。比較的低いレベルの次の見出しは、その子ノードになります。同じレベルまたはより高いレベルの見出しは、このノードを閉じて新しいノードを生成します。次のコードをテストできます。

 < h3 > 4つ</ h3 >  
 < p >フォーとは… </ p >  
 < h3 > 《検索》 </ h3 >  
 < p >検索について.. </ p >

または：

 < h3 > 《検索》 </ h3 >  
 < p >検索について.. </ p >  
 < h2 >外国映画</ h2 >

ノード要素によって生成されたアウトライン

おそらく HTML5 の構造は次のようになります。

 <div>   
   < h6 > 8月のおすすめ映画</ h6 >  
   <セクション>  
     < h1 >国内映画</ h1 >  
     <記事>  
       < h1 > 4つ</ h1 >  
       < p >フォーとは… </ p >  
     </記事>  
     <記事>  
       < h3 > 《検索》 </ h3 >  
       < p >検索について.. </ p >  
     </記事>  
   </セクション>  
   <セクション>  
     < h5 >外国映画</ h5 >  
     <記事>  
       < h6 >アイスエイジ4 </ h6 >  
       < p >アイス エイジ 4 について.. </ p >  
     </記事>  
     <記事>  
       < h1 > 《脱出》 </ h1 >  
       < p >エスケープとは… </ p >  
     </記事>  
   </セクション>  
 
   < p >上記のコンテンツはXunlei Kankanによって提供されています</ p >  
 <div>

(まずは上記のコード内のさまざまな hn に注目してください) コードをアウトライナーツールにコピーして表示します。生成されたアウトラインが、美しく書かれたレベルを持つ HTML4 と同じであることに驚きました。なぜhnの階層がここに表されていないのでしょうか?

その理由は、アウトラインが見出し要素ではなくノード要素によって生成されるためです。 HTML5 の新しいタグ section、article、aside、nav は明示的なノード (明示的なセクション) を生成し、各明示的なノードには独自のタイトル構造があります (もちろん、HTML4 および HTML5 のアウトラインアルゴリズムにも準拠しています)。このため、HTML5 では複数の h1 の存在が許可されています。ただし、すべてのブラウザとスクリーンリーダーが HTML5 を完全にサポートする前に、タイトル構造と Graceful Degradation を同時に考慮することをお勧めします。したがって、上記の構造は次のように変更できます。

 <div>   
   < h1 > 8月のおすすめ映画</ h1 >  
   <セクション>  
     < h2 >国内映画</ h2 >  
     <記事>  
       < h3 > 4つ</ h3 >  
       < p >フォーとは… </ p >  
     </記事>  
     <記事>  
       < h3 > 《検索》 </ h3 >  
       < p >検索について.. </ p >  
     </記事>  
   </セクション>  
   <セクション>  
     < h2 >外国映画</ h2 >  
     <記事>  
       < h3 >アイスエイジ4 </ h3 >  
       < p >アイス エイジ 4 について.. </ p >  
     </記事>  
     <記事>  
       < h3 > 《脱出》 </ h3 >  
       < p >エスケープとは… </ p >  
     </記事>  
   </セクション>  
   < p >上記のコンテンツはXunlei Kankanによって提供されています</ p >  
 <div>

ここで注目すべきもう一つの疑問は、「上記コンテンツはXunlei Kankanによって提供されています」というフレーズは上記コンテンツのどの部分を指しているのかということです。 HTML4 構造では、この段落は暗黙のノード「The Escape from the Doom」に従属していますが、これは明らかに間違っています。 HTML5 アウトラインアルゴリズムはこの問題を非常にうまく解決します。

hn要素とノード要素の両方のアウトラインを生成する

ページに暗黙的なノード (h1 ～ h6) と明示的なノード (セクションなど) の両方が含まれている場合、アウトラインはどのように生成されますか? 1 つだけ覚えておいてください。明示的なノードには暗黙的なノードを含めることができますが、その逆はあり得ません。

 < h1 > 8月のおすすめ映画</ h1 >  
 <セクション>  
   < h2 >国内映画</ h2 >  
   < h3 > 4つ</ h3 >  
   < p >フォーとは… </ p >  
   < h3 > 《検索》 </ h3 >  
   < p >検索について.. </ p >  
 </セクション>

(コード1)

このコードの概要は次のようになります。

 1. 8月のおすすめ映画
  1. 国内映画
    1. 4人
    2. 検索

< h1 > 8月のおすすめ映画</ h1 >  
 < h2 >国内映画</ h2 >  
 <記事>  
   < h3 > 4つ</ h3 >  
   < p >フォーとは… </ p >  
 </記事>  
 <記事>  
   < h3 > 《検索》 </ h3 >  
   < p >検索について.. </ p >  
 </記事>

ただし、このコードの概要は次のようになります。

 1. 8月のおすすめ映画
  1. 国内映画
  2. 4人
  3. 検索

タイトル要素によって生成された暗黙的なノードがノード要素によって生成された明示的なノードと出会うと、そのノードは閉じられ、同じレベルの次のノードが生成されます。

無題のセクション

section、article、aside、navに加えて、HTML5では新しいノード要素も存在します。これらも使用してみましょう。

 <ナビゲーション>   
   < ul >  
     < li > < a   href = "" >ホーム</ a > </ li >  
     < li > < a   href = "" >トピック</ a > </ li >  
     < li > < a   href = " " >について</a> </li>  
   </ ul >  
 </ナビ>  
 < h1 > 8月のおすすめ映画</ h1 >  
 <セクション>  
   < h2 >国内映画</ h2 >  
 </セクション>  
 <セクション>  
   < h2 >外国映画</ h2 >  
 </セクション>

これをアウトライナーにコピーすると、nav にタイトル要素がないため、nav タグによって無題のセクションが生成されることがわかります。これはエラーではなく、また HTML5 構造が悪いとも考えられません。ただし、セクションや記事には適切なタイトルを付けることをお勧めします。どのようなタイトルを付ければよいかわからない場合は、div を使用する方が適切かもしれません。div がまだあることを忘れないでください。

ルートノード

重要な原則については前に説明しました。明示的なノードには暗黙的なノードを含めることができますが、その逆はあり得ません。リスト 1 によって生成されたアウトラインに気付くかもしれません。

 1. 8月のおすすめ映画
  1. 国内映画
    1. 4人
    2. 検索

タイトル要素 h1 (「8 月の映画おすすめ」) に続くノード要素セクション (「国内映画」) がその子ノードになります。暗黙的ノードに明示的ノードを含めることはできませんか?このとき、ルートノードを知っておく必要があります。

ルートノードは独自のアウトラインを生成でき、そのタイトルとノードは祖先のアウトラインには影響しません (祖先のアウトラインには表示されません)。現在、ルートノードは 6 つあります。

1. 本文、2. 引用ブロック、3. 詳細、4. フィールドセット、5. 図、6. td

テストすることができます:

 < h1 >私は兄です</ h1 >  
 <引用>  
   <セクション>  
     < h1 >私は blockquote の兄貴分です。アウトライナーでは見つかりません</ h1 >  
   </セクション>  
 </引用>  
 < h2 >私は年下です</ h2 >

定義ドキュメントでは、ノード要素は最も近い祖先ルートノードまたはノード要素の子ノードであると規定されています。コード 1 のタイトル要素 h1 (「8 月の映画おすすめ」) は本文のタイトルであり、ノード要素 section (「国内映画」) は本文の子ノードです。

もう 1 つ非常に重要な点があります。ドキュメントのタイトルは、ドキュメント内でノード要素ではない最初のタイトル要素です。次のコードをテストするのは非常に明確です。

 <セクション>   
   < h1 >タイトルになりたいけどなれない</ h1 >  
 </セクション>  
 < h6 >一番下のレベルだけど、一番最初に登場した。 h6だけど、一番に来たよ</ h6 >  
 < h1 >最大の順序を持つことは無意味です。私はまだ古い 6 より下です。私は h1 ですが、h6 より後です</ h1 >

このプロセス中に、もう一つの混乱する点にも遭遇しました。

 <セクション>   
   < h1 >タイトルになりたいけどなれない</ h1 >  
 </セクション>  
 <セクション>  
   < h2 >この文書のタイトルになりたいのですが、それもできません:( </ h2 >  
 </セクション>  
 <フッター>  
   < h3 >私はフッターなのに、なぜタイトルになるのでしょうか?? </ h3 >  
 </フッター>

理由は単純で、ヘッダーとフッターはノード要素ではないからです。

hグループ

Hgroup は理解しやすく、使いやすいです。その機能は、ドキュメントのアウトラインに影響を与えずにサブタイトルを追加できるようにすることです。表示順序に関係なく、最上位のタイトルのみがアウトラインに表示されます。

 < hグループ>   
   < h3 >私はあなたの愛する2番目のタイトルです、私は役に立ちますが、アウトライナーには表示されません</ h3 >  
   < h2 >私は見出しです。わざとここに来ました。私はグループ内で最高レベルの hn です。どこにいても、私はアウトライナーの一部になります。 </ h2 >  
 </hgroup>

要約する

この記事の執筆時点では、HTML5 アウトラインアルゴリズムを完全にサポートしているブラウザーはないようです。しかし、これは HTML5 アウトラインアルゴリズムの研究には影響しません。現在、私たちは HTML5 + CSS3 の使用に熱心に取り組んでいます。 HTML5 アウトラインアルゴリズムを理解すると、新しいタグの使用法をより深く理解できるだけでなく、最も基本的なページ構造をより最適化して理解するのにも役立ちます。タイトル要素によって生成されるアウトラインでも、セマンティクスの兆候である完璧な階層構造を持つことができます。

この問題に注意を払うよう私に思い出させてくれた Daanzi に特に感謝します。

参考研究論文:

http://www.osmn00.com/rebuild/223.html

http://www.456bereastreet.com/archive/201103/html5_sectioning_elements_headings_and_document_outlines/

http://coding.smashingmagazine.com/2011/08/16/html5-and-the-document-outlining-algorithm/

http://html5doctor.com/outlines/

https://developer.mozilla.org/en-US/docs/HTML5 ドキュメントのセクションとアウトライン

オリジナルリンク: http://cued.xunlei.com/log047

【編集者のおすすめ】