navタグの使い方とアウトライン

セカンドページのアウトラインはサイト名から始めるか、
ページタイトルから始めるかで迷っています。

アウトラインをサイト名から始めた場合は、
グローバルナビゲーションをnavタグで囲もうと思いますが、
ページタイトルからアウトラインを始めた場合はグローバルナビゲーションをnavタグで囲むと違和感があります。
navタグでセクションができますが、ページタイトルがグローバルナビゲーションのセクションを持つのは不自然だと思うのです。
かと言ってトップページではグローバルナビゲーションをnavタグで囲んで、
セカンドページはnavタグを使わないのはありなのか調べても分かりませんでした。

タグの使用とアウトラインのどちらを優先すればよいのでしょうか？
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

お気持ちお察しします。

HTML
1<body>
2	<header>
3		<p>ロゴ</p>
4	</header>
5	<nav>
6		<ul>
7			<li>ナビ</li>
8		</ul>
9	</nav>
10	<article>
11		<h1>ページタイトル</h1>
12		<section>
13			<h2>小見出し</h2>
14		</section>
15	</article>
16	<footer>
17		コピーライト
18	</footer>
19</body>

セカンドページをこういう具合にマークアップした場合、
アウトラインをチェックすると

Outline

└[body element with no heading]

　 ├[nav element with no heading]

　 └ページタイトル

　　 └小見出し

こうなりますよね。どうしても。
これが気持ち悪いのは分かります。分かりますが、現実にはこのようにマークアップしている方が多いのではないかと思います。

なぜなら、、、

現時点では、準拠チェッカーなどのソフトウェアにはこのアウトライン・アルゴリズムが実装されているものの、グラフィカルブラウザーや支援技術のユーザーエージェントで、このアルゴリズムの実装は知られていません。従って、このアウトライン・アルゴリズムを頼りにして、ユーザーにドキュメント構造を伝達することはできません。ウェブ制作者には、見出しランク (h1–h6) を使ってドキュメント構造を伝達することが求められます。

出典：HTML5.jp

ということで、実際にはセクショニング・コンテンツを使ったアウトラインの出力に対応している環境がまだ存在しないため、実質的には従来通りh1-h6の見出しによるアウトラインしか認識できないからです。

なので、

アウトライン構造は見出しでつくる
セクション要素はブロック単位の意味付けとして利用する

というのが当面の現実的な対処法なのではないかと思われます。

投稿2015/12/05 03:29

編集2015/12/05 03:37

aKusano

総合スコア3763

y-neon

2015/12/05 04:59

ご回答ありがとうございます。個人的にコーディングしていてセクション要素を使う必要があるのか疑問でした。セクション要素にアウトラインの出力は余計で、使いにくいです。セクショニング・コンテンツを使ったアウトラインの出力に対応している環境がないということに驚きました。ということはセクション要素でアウトラインは実は作られていないってことでしょうか。そもそもgoogle検索エンジンのためだけにセクション要素を使うのもなんだかなぁと腑に落ちない気持ちもあります。セクション要素を使う効果もいまいち分からないせいもあります。無理にセクション要素を使う必要はないと書いてあるブログもありましたが、人によって使っているセクション要素、使っていないセクション要素があり、 navタグを使わないとこのページはナビゲーションがない！ってことでユーザビリティの悪いページ扱いになるのでしょうか。ユーザーからすればナビゲーションだと分かるわけですが。ユーザーの滞在時間や直帰率が良ければ問題ないという考えはありでしょうか。

aKusano

2015/12/05 07:07

HTML5のアウトライン・アルゴリズムについては理想と現実、仕様と実装の狭間で宙ぶらりんになってしまっているというのが実情のようですね。。。仕様上ではセクション要素でアウトラインが作られることになっていますが、実装がおいつかないので現状はセクション要素ではアウトラインはつくられていないようです。。。 > そもそもgoogle検索エンジンのためだけにセクション要素を使うのもなんだかなぁと腑に落ちない気持ちもあります。セクション要素で意味付けすることの本質的な目的はgoogle検索エンジン対策ではないので、基本的にそことは切り離した方が良いかと思います。例えば使うことによる実利的な効果・効能は無くても、箇条書き構造があればul/ol要素を使いますよね？それと同じことです。HTML文書の構造表現上の「お作法」の話なので。 > 無理にセクション要素を使う必要はないと書いてあるブログもありましたが、これはその通りだと思います。セクション要素は必須要素ではないので、無理に使う必要は実はありません。ただ、セクション要素が持つ意味付け効果により、使っておいたほうがより構造が明確になりますよ、というだけの話です。今はまだほとんど対応されていませんけど、全ての環境でセクション要素の役割を正しく実装・解析できるようになれば、マークアップしただけでアクセシビリティを向上させることも可能になりますし。 > 人によって使っているセクション要素、使っていないセクション要素があり、人によって使うセクション要素・使わないセクション要素があるのは、サイトによって各セクションの意味付けは変わるので当然かと思います。特にarticel、asideについては必ずしも全てのHTML文書で必要となる要素ではないため、その傾向が強いように思われますね。 > navタグを使わないとこのページはナビゲーションがない！ってことでユーザビリティの悪いページ扱いになるのでしょうか。どうでしょうね。少なくとも通常のビジュアルブラウザを目で見ている人間にとってはどうでもいいことだと思います。影響があるとしたら、スクリーンリーダーや、HTMLの文書構造を自動解析するプログラム群に対してでしょう。navなんかは特に機械的に処理しやすい対象なので、そのような環境に対して「ここがナビゲーションだよ」ということをアピールしやすいという点では何らかの実益がありそうな気もします。ただ、それも現状では全ての環境で対応しているわけではなかったり、他に代替手段があったりで、どうしてもnavでなければダメだという理由はなさそうです。ただ、HTML要素の意味付けを無視して暴走した結果がテーブルレイアウトやdivdiv攻撃の悪夢だったりするので、仕様に従って粛々とマークアップするのが吉なのではないかと個人的には思います。すみません、とりとめのない話になってしまいましたね。。。

y-neon

2015/12/05 07:56

さらにご回答くださいましてありがとうございます。より理解が深まりました。テーブルレイアウトが使われていたこともありましたね。要素の意味付けは無視すべきではありませんし、html5は文書構造を明覚にするために要素を見直した言語ですよね。それを考慮すると仕様に従うのがやはり一番良いと思いました。

行動規範の内容に同意します