スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告|
  3. トラックバック(-)|
  4. コメント(-)
  5. | 人気ブログランキング
  6. | FC2 Blog Ranking
  7. | はてなブックマークに追加
  8. | Buzzurlにブックマーク
  9. | livedoor クリップに追加

h1要素と文書構造

前回エントリー『ナビゲーションのスキップと文書構造』の続きです。

【ミツエーリンクス】
h1要素の扱い | Web標準Blog | ミツエーリンクス(2005年08月26日掲載)
http://standards.mitsue.co.jp/archives/000069.html

<引用>

構造的にマークアップを進めていく場合、h1で括るのにふさわしいものとして「a.サイト共通のタイトルや企業名称」と「b.そのページのユニークなタイトル」のうち、どちらがより適切でしょうか。

(途中 略)

  • 見出し要素とは、後続するセクションの話題を短く述べたもの
  • 見出し要素には重要度に応じて1~6のレベルがあり、最も重要なものがh1要素でマークアップすべき情報

<引用 終わり>


 当ブログもずっとこのサイトから勉強させて頂いてます。『h1要素でマークアップすべき情報』悩ましいテーマですね。自問自答して、切羽が詰まったりします。まとめると

  1. サイト共通のタイトルや企業名称
  2. そのページのユニークなタイトル
  3. 一つではなく、セクション毎の見出しをh1要素

 大概は1か2ですね。例外的な3を紹介します。

コニカミノルタ
http://konicaminolta.jp/index.html

 ソースコードを覗くと、[グローバルナビゲーション][本文][ローカルナビゲーション][サイト情報]が見出しh1要素に成ってます。最初に見たときは「え、良いの?」と思いました。しかし、見出しh1要素はよく書籍の『第1篇』に例えられます。1文書に2つ以上登場してもなんら問題なし、いくつ登場しようが良いんですね、目から鱗。

 さらに都合が良いのは、この『セクション毎のh1要素』によって、スクリーンリーダー音声ブラウザを使用している障害者が、セクションからセクションへスキップすることが出来るのです(勿論このサイトの制作者の知識と配慮だと思います)。アクセシビリティ向上に最適ですね。

 ただちょっと問題ありとすれば、SEOとしてどうなの?ってところです。見出しh1要素に[サイト共通のタイトルや企業名称][そのページのユニークなタイトル]が含まれていないのは、大変な損失ですね。

■そこでお薦めするのが、「望月 優」式48Luck改良型文書構造です。大雑把に

サイト共通のタイトルや企業名称
パンくずリスト
h1[そのページのユニークなタイトル]
本文(h2等もアリ)
h1[ローカルナビゲーション]
ローカルナビゲーション
h1[グローバルナビゲーション]
グローバルナビゲーション
h1[サイト情報]
いわゆるフッター情報

この文書構造の利点は

  1. 単純・明快
  2. アクセシビリティの向上(障害者も、検索ロボットも情報を取得しやすい)
  3. SEOも自然と向上(内部要因の改善)し、アクセスアップが期待できる

欠点は

  1. なじみがない
  2. デザイン(文書表現 = CSS)が開発されていない

 クリエータの皆さん、是非クールなCSS開発をお願いします。

スポンサーサイト
  1. 2005/11/02(水) 01:58:21|
  2. 汎用設計(ユニバーサルデザイン)|
  3. トラックバック:0|
  4. コメント:0
  5. | 人気ブログランキング
  6. | FC2 Blog Ranking
  7. | はてなブックマークに追加
  8. | Buzzurlにブックマーク
  9. | livedoor クリップに追加
<<民放キー局 ネット通販、実績着々 地方も熱い視線(CNET Japan ニュースより) | ホーム | ナビゲーションのスキップと文書構造>>

コメント

コメントの投稿

管理者にだけ表示を許可する

トラックバック

トラックバックURLはこちら
http://48luck.blog9.fc2.com/tb.php/47-6a45de6c

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。