web-dev-qa-db-ja.com

記事ページのH1-サイトタイトルまたは記事タイトル？

記事指向のページ（ブログ投稿など）内では、<h1>要素（レベル1の見出し）は通常、次のいずれかをマークアップするために使用されます。

  • ブログのタイトル（つまり、ページの上部にある大きなサイトのタイトル、<title>要素ではない）、または
  • 記事のタイトル

最良の選択とその理由は何ですか？

サイト/ブログの名前を世界に向けて叫びたいと思うかもしれないサイト所有者にとって、サイトタイトルの周りにレベル1の見出しを使用することは理にかなっているように思われるかもしれません。

ユーザーに伝えようとしていることの観点からは、サイトのタイトルはあまり関連性がありません。記事のコンテンツは伝えようとしているものであり、他のすべてのサイトのコンテンツは二次的なものです。したがって、記事のタイトルに<h1>を使用するのが最適と思われます。

<h1>要素は、サイトのタイトルやその他のコンテンツではなく、記事のタイトルに焦点を当てるべきだと思います。これは決して人気のある慣習ではないようです。

例：

  • Joel Spolsky 記事のタイトルに<h1>を使用し、サイトのタイトルにアンカーを使用します
  • Jeff Atwoodno <h1>をまったく使用しない、<h2>を記事のタイトルに、アンカーをサイトのタイトルに使用
  • 7 Signals'SVN サイトタイトルに<h1>を使用し、記事タイトルにアンカーを使用します

これは、正しいセマンティックマークアップを強く検討することが期待される、3つのサイトにわたる3つの異なるアプローチです。

ジョエルはジェフとすぐにそれを正しく持っていると思います。 37Signalsの人々によるマークアップの選択には非常に驚いています。

私にはそれは非常に単純な決定のように思えます：記事の消費者にとって最も関連性のあるものは何ですか？記事のタイトル。したがって、記事のタイトルを<h1>要素でラップします。完了。

私が間違っている？私が見逃しているさらなる考慮事項はありますか？私は正しいですか？もしそうなら、なぜ「記事タイトルの<h1>」アプローチがより一般的に使用されないのですか？

<h1>要素をどこで使用するかの決定は、私が言ったように不変ですか？それとも、主観的な考慮事項もありますか？

更新：これまでのすべての回答に感謝します。サイトのタイトルの代わりに記事のタイトルに<h1>を使用すると、使いやすさとアクセシビリティにどのように役立つか（またはそうでない場合もあります）について、ある程度の角度から感謝します。個人的な想定ではなく、事実に基づいた回答は多くのボーナスポイントを獲得します！

htmlusabilityaccessibilitysemantics
57
Jon Cram

このトピックについて W3C品質保証のヒント があります：

<h1>は、ドキュメントの第1レベルの見出しのHTML要素です。

  • ドキュメントが基本的にスタンドアロンである場合（たとえば、ジュネーブの見どころとアクティビティ）、トップレベルの見出しはおそらくタイトルと同じです。

  • それがコレクションの一部である場合、たとえばペットに関するページのコレクション内の犬に関するセクションの場合、トップレベルの見出しはある程度のコンテキストを想定する必要があります。書くだけ <h1>Dogs</h1>タイトルはどのような状況でも機能するはずです：犬-ペットへのガイド。

32
xsl

スクリーンリーダーのユーザーとして、見出しのレベルは一貫している限り重要ではありません。ブログが異なれば、使用される規則も異なるため、ブログをよりアクセスしやすくするための標準的な方法はありません。見出しがコンテンツレベルと一致していることを確認することは、使用される見出しのレベルよりも重要です。たとえば、コメント付きの一連のブログ投稿を表示する場合、すべてのブログ投稿の見出しレベルは2になり、コメントの開始時に見出しレベル3になる可能性があります。サブセクション。スクリーンリーダーを使用してメインセクションを簡単にスキップして、見出し機能でナビゲートしてレベル2の見出しにジャンプできます。特定のセクションのサブセクションに移動する場合は、次の見出しに移動します。

12
Jared

あなたのブログのホームページでは、H1を使用してサイトのタイトルを示し、H2を使用してフロントページに公開されている個々のブログ投稿のタイトルを示します。

ただし、特定の記事を入力するときは、記事のタイトルにH1を使用し、サイトのタイトルにアンカーを使用します。

これは、サイトをクロールするときにGoogleにも評価される、優れたセマンティック設定です。

11
JacobE

ウィキペディアでは、h1-Tagには、h2で始まるドキュメントの記事名と見出しが含まれています。ウィキペディアという名前は、htmlヘッダーのタイトルタグの一部です。私もそれが進むべき道だと思います。ですから、ブログについては、あなたが与えた例のJoelSpolskyが欲しいです。

そして、私は常に最高レベルから始めるので、h1を出すことは私の意見では悪い選択肢です。

3
Mnementh

HTMLページの<head>部分には、<title>という名前の要素があります。名前が示すように、これはサイトタイトル用です。

HTMLは、レイアウトではなく、マシンで解析可能な形式にページを構造化するために使用されます。レイアウトのみの場合は、クラス/ IDが異なる<div>ブロックと<span>ブロックのみを使用し、それらにCSSを適用できます。の代わりに

<h2>Sub Header</h2>

使用できます

<div class="header2>Sub Header</div>

そしてどこかに、この<div>をh2のように見せるCSSコードがあります（フォントサイズ、太字フォントなど）。違いは、最初の例では、コンピューターが私の<div>が実際には第2レベルのヘッダーであることを認識できないことです（どのようにしてそれを知る必要がありますか？「header2」とは異なる名前を付ける場合があります）が、最初の例では場合、それが<h2>要素であるという事実により、それが第2レベルのヘッダーであることがわかり、ページの見出しの構造化されたリストをユーザーに表示したい場合は、そうすることができます。

  • トップレベルヘッダー
    • サブヘッダー
      • サブサブヘッダー
    • サブヘッダー
    • サブヘッダー
  • トップレベルヘッダー
    • サブヘッダー
      • サブサブヘッダー
      • サブサブヘッダー
    • サブヘッダー
      ：

h1/H2/H3/...要素を検索し、上記のように構造化します。それで、コンピュータがページのタイトルを見つけようとすると、どこでそれを探すのでしょうか？ <title>という名前の要素または<h1>という名前の要素で？少し考えてみれば、答えがわかります。

もちろん、「しかし、タイトルはページに表示されません」と言うかもしれません。ええと、それは通常どこかのブラウザウィンドウ（ウィンドウタイトルまたは少なくともタブタイトル）に表示されます-しかし、あなたはそれをページにも表示したいかもしれません-私はそれを理解することができます。しかし、それを行うことについて何が話しますか？あなたがそれを繰り返さないかもしれないと誰が言いますか？しかし、そのためにh1要素を使用する必要があるのではないかと思います。

<html>
<head>
<title>SOME TITLE</title>
</head>
:
<body>
<div id="title">SOME TITLE</div>
:
</body>
</html>

CSSを使用して、#titleを好きなようにスタイル設定します。それを超大きく、超大胆にし、必要に応じて目を引く色にします。それに反対するものは何もありません。自動ページパーサーは通常、divとspanをある程度無視します。これは、何も伝えないためです（これらは、リーダー用にページをレイアウトするために使用される要素ですが、ページの構造については何も言いません。LAYOUTはSTRUCTUREではありません、レイアウトを生成するために特定の構造要素にのみスタイルを適用できますが、一方を他方と混同しないでください）。それでもコンピュータはページのタイトルが何であるかを知っています、それはtitle要素のおかげでそれを知っています。

2
Mecki

典型的なウェブサイトの場合、例えばブログの場合、h1にはサイトのタイトルを含める必要があります。はい、すべてサイトのページにあります。

どうして？ Webサイトには、すべてのWebページで共有されるさまざまな部分があります。例としてナビゲーションを見てみましょう：

<ul id="site-navigation">
  <li><a href="/">Home</a></li>
  <li><a href="/about">About me</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

この#site-navigationは、サイトのすべてのページで繰り返されます。これは、ページナビゲーションではなく、サイトナビゲーションを表します。違いは重要です！ {ページナビゲーションは、目次（Wikipediaの記事など）または長い記事のページ付けである可能性があります。}

記事のタイトルをh1として使用する場合、サイトナビゲーションはこの見出しの範囲に含まれます。

<body>
  <div>John’s blog</div> <!-- the site title -->
  <h1>My first blog post</h1> <!-- the article title -->
  <p>…</p>
  <h2>Navigation</h2>
  <ul id="site-navigation">…</ul> <!-- the site-wide navigation -->
</body>

したがって、このマークアップは次のことを伝えます。ナビゲーション（→h2で開始）は記事の一部です（→h1で開始）。しかし、これは真実ではありません。このナビゲーションは記事のナビゲーションではありません。リンクは実際にはサイト全体の一部であり、サイトはサイトの見出しで表されます。

記事に小見出しが含まれている場合も、問題はより明確になります。

<body>
  <div>John’s blog</div> <!-- the site title -->
  <h1>My first blog post</h1> <!-- the article title -->
  <p>…</p>
  <h2>Why I’m blogging</h2>
  <p>…</p>
  <h2>Why you should read my blog</h2>
  <p>…</p>
  <h2>Navigation</h2>
  <ul id="site-navigation">…</ul> <!-- the site-wide navigation -->
</body>

ご覧のとおり、記事の小見出しとナビゲーションを区別する方法はありません。この記事には、「ブログを書いている理由」、「ブログを読むべき理由」、「ナビゲーション」の3つの小見出しがあるようです。

したがって、代わりにサイトタイトルにh1を使用し、記事タイトルにh2を使用する場合、h2を使用することで、ナビゲーションをサイト見出しの範囲内に含めることができます。

<body>
  <h1>John’s blog</h1> <!-- the site title -->
  <h2>My first blog post</h2> <!-- the article title -->
  <p>…</p>
  <h2>Navigation</h2>
  <ul id="site-navigation">…</ul> <!-- the site-wide navigation -->
</body>

現在、このマークアップは次のことを伝えています。「John'sblog」というタイトルのサイト（→h1で開始）があり、記事（→最初のh2で開始）とサイトナビゲーション（→で開始）が含まれています。 2番目のh2）。もちろん、記事の小見出しはh3になります。

記事のタイトルにh1を使用することによる別の問題は、通常、コンテンツが存在することですbefore最初の見出し。サイトのタイトルやその他のものを含むサイトのヘッダー。見出しを介してナビゲートするユーザーの場合、この最初のコンテンツは「非表示」になります。したがって、すべての個別のブロックに独自の見出しを付けることをお勧めします。

HTML5は、これを セクショニング/アウトラインアルゴリズム で形式化します。 section/article/nav/aside。ただし、HTML5でも、サイトの見出しはbodyの子であるh1である必要がありますが、セクション要素/ルートの子ではありません。他のすべてのセクションは、このサイトの見出しの範囲内にあります。

1
unor

記事ページのH1-サイトタイトルまたは記事タイトル？

両方とも。この記事は有益です： HTML5時代の複数のH1タグについての真実 。

1
Mori