サイト分析: HTML アウトライン アルゴリズムが構造に与える影響

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

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

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

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

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

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

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

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

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

 1. 8月の映画おすすめ 1. 国内映画 1. ザ・フォー 2. 捜索 2. 外国映画 1. アイス・エイジ4 2. 脱出

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

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

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

 <div> <h1>8月の映画おすすめ</h1> <h2>国内映画</h2> <h3>ザ・フォー</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>《The Four》</h3><p>The Four とは…</p><h3>《Search》</h3><p>Search とは…</p>

または：

 <h3>《検索》</h3><p>検索対象は…</p><h2>外国映画</h2>

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

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

 <div> <h6>8月の映画おすすめ</h6> <section> <h1>国内映画</h1> <article> <h1>The Four</h1> <p>The Four のあらすじは…</p> </article> <article> <h3>検索</h3> <p>検索 のあらすじは…</p> </article> </section> <section> <h5>外国映画</h5> <article> <h6>Ice Age 4</h6> <p>Ice Age 4 のあらすじは…</p> </article> <article> <h1>The Escape</h1> <p>The Escape のあらすじは…</p> </article> </section> <p>上記コンテンツは Xunlei Kankan より提供</p><div>

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

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

 <div> <h1>8月のおすすめ映画</h1> <section> <h2>国内映画</h2> <article> <h3>The Four</h3> <p>The Four のあらすじは…</p> </article> <article> <h3>検索</h3> <p>検索 のあらすじは…</p> </article> </section> <section> <h2>外国映画</h2> <article> <h3>アイス・エイジ4</h3> <p>アイス・エイジ4 のあらすじは…</p> </article> <article> <h3>The Escape</h3> <p>The Escape のあらすじは…</p> </article> </section> <p>上記コンテンツは Xunlei Kankan より提供</p><div>

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

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

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

 <h1>8 月のおすすめ映画</h1><section> <h2>国内映画</h2> <h3>The Four</h3> <p>The Four について</p> <h3>検索</h3> <p>検索について</p></section>

(コード1)

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

 1. 8月のおすすめ映画 1. 国内映画 1. 「ザ・フォー」 2. 「サーチ」

 <h1>8 月のおすすめ映画</h1><h2>国内映画</h2><article> <h3>The Four</h3> <p>The Four について</p></article><article> <h3>検索</h3> <p>検索について</p></article>

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

 1. 8月のおすすめ映画 1. 国内映画 2. 「ザ・フォー」 3. 「サーチ」

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

無題のセクション

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

 <nav> <ul> <li><a href="">ホーム</a></li> <li><a href="">特集</a></li> <li><a href="">概要</a></li> </ul></nav><h1>8月のおすすめ映画</h1><section> <h2>国内映画</h2></section><section> <h2>外国映画</h2></section>

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

ルートノード

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

 1. 8月のおすすめ映画 1. 国内映画 1. 「ザ・フォー」 2. 「サーチ」

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

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

1.本体

2. 引用

3. 詳細

4.フィールドセット

5.図

6.td

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

 <h1>私は兄です</h1><blockquote> <section> <h1>私はblockquoteでは兄です。アウトライナーでは見つかりません</h1> </section></blockquote><h2>私は弟です</h2>

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

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

 <section> <h1>タイトルになりたいけどなれない</h1></section><h6>階層の中では一番小さいのに、最初に登場します</h6><h1>階層の中で一番大きくても関係ありません。私はまだ h1 より下です</h1>

私はまた別の混乱した事態に遭遇しました:

 <section> <h1>タイトルになりたいけどなれない</h1></section><section> <h2>私もタイトルになりたいけどなれない私も:(</h2></section><footer> <h3>私はフッターなのに、なぜタイトルになるの??</h3></footer>

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

hグループ

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

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

要約する

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

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

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

原題: ウェブサイト分析: HTML アウトライン アルゴリズムが構造に与える影響

キーワード: ウェブサイトの分類、HTML、概要、アルゴリズム、構造、影響、HTML5、長期、ウェブマスター、ウェブサイトのプロモーション、収益化