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

https://stackoverflow.com/questions/268475

06-07-2019
|

質問

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

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

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

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

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

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

例：

Joel Spolsky は、記事タイトルに<=>を使用し、サイトタイトルにアンカーを使用します
Jeff Atwood は、記事に no <=>まったく、<=>を使用しますタイトルとサイトタイトルのアンカー
37 SignalsのSVN は、サイトタイトルに<=>を使用し、記事タイトルにアンカーを使用しています

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

私は、ジョエルがジェフと2番目に近いと思います。 37Signalsの人々によるマークアップの選択に驚いています。

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

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

<=>要素をどこで使用するかは、私が決めたように不変ですか？または、主観的な考慮事項もいくつかありますか？

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

解決

このトピックに関する W3C品質保証のヒントがあります。

<h1>は、   ドキュメントの第1レベルの見出し：



ドキュメントが基本的に   スタンドアローン、たとえば「見るもの」   そして、ジュネーブ、トップレベルで   見出しはおそらくと同じです   タイトル。



の一部である場合   コレクション、例えば上のセクション   約ページのコレクション内の犬   ペット、次にトップレベルの見出し   一定量を想定する必要があります   コンテキスト; <h1>Dogs</h1>と書くだけです   タイトルは   コンテキスト：犬-ペットのガイド。

他のヒント

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

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

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

これは、Googleがサイトをクロールするときにも高く評価されるセマンティックなセットアップです。

Wikipediaでは、h1-Tagには、h2で始まるドキュメントの記事名と見出しが含まれています。ウィキペディアという名前は、htmlヘッダーのtitleタグの一部です。私もそれが道だと思います。ブログの場合、あなたが与えた例でジョエル・スポルスキーが好きです。

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

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

HTMLは、レイアウトではなく、機械で解析可能なフォームにページを構成するために使用されます。レイアウトのみの場合は、異なるクラス/ IDを持つ<div>および<span>ブロックのみを使用し、CSSを適用できます。

の代わりに

<h2>Sub Header</h2>

使用できます

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

とどこかに、この<h2>をh2（フォントサイズ、太字フォントなど）のように見せるためのCSSコードがあります。違いは、最初の例では私の<h1>が実際に第2レベルのヘッダーであることをコンピューターが認識できないことです（どうやってそれを知る必要がありますか？<！> quot; header2 <！> quot; ）ただし、最初のケースでは、#title要素であり、ページのヘッドラインの構造化されたリストをユーザーに表示したいという事実によって、それが第2レベルのヘッダーであることを知っていますそう

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

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

もちろん<！> quot;と言うこともできますが、タイトルはページに表示されません<！> quot;。まあ、通常はブラウザウィンドウのどこか（ウィンドウタイトルまたは少なくともタブタイトル）に表示されます-ただし、ページにも表示したい場合があります-それは理解できます。しかし、それを行うことについて何を語っていますか？あなたはそれを繰り返さないかもしれないと誰が言いますか？しかし、そのためにh1要素を使用すべきかどうか疑問に思います。

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

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

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

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

<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記事など）または長い記事のページネーションです。}

<！>＃8217; dの記事タイトルをh2として使用すると、サイトナビゲーションはこの見出しの範囲内になります。

<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>

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

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

<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つのサブ見出しがあるようです。<！> quot; Why I <！>＃8217; m blogging <！> quot ;, <！> quot;なぜあなたは私のブログ<！> quot;および<！> quot; Navigation <！> quot;。

したがって、代わりにサイトタイトルにarticleを使用し、記事タイトルにnavを使用する場合、asideを使用して、ナビゲーションをサイトヘッダーの範囲内にすることができます。

<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>

このマークアップが伝える内容：<！> quot; John <！>＃8217; s blog <！> quot;というタイトルのサイトがあります。（<！>＃8594; bodyで開始）、記事（<！>＃8594;最初の<=>で開始）およびサイトナビゲーション（<！>＃8594; 2番目の< =>）。記事の小見出しはもちろん<=>になります。

記事のタイトルに<=>を使用することによるもう1つの問題は、通常、最初の見出しの前にコンテンツがあることです。サイトのタイトルなどを含むサイトヘッダー。見出しを介してナビゲートするユーザーの場合、この最初のコンテンツは<！> quot; invisible <！> quot;になります。したがって、<！>＃8217;ブロックごとに独自の見出しを付けることをお勧めします。

HTML5はこれをセクショニング/アウトラインアルゴリズムで形式化します>。コンテンツの順序は（ほとんど）無料になり、<！>＃8217; t <<> quot; invent <！> quot; <=> / <=> / <=> / <=>のおかげで、あなたがしたくない場合の実際の見出し<！>＃8217; tしかし、HTML5でも、サイトの見出しは<=>である必要があります。これは<=>の子ですが、セクション要素/ルートの子ではありません。他のすべてのセクションは、このサイトの見出しの範囲内です。

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

両方。この記事は参考情報です。 HTML5時代の複数のH1タグに関する真実。

1つのみ存在する必要があり、1つのみ存在する必要があります

h1

;通常、これはページタイトルです。次に、h2、h3などに続きます。

したがって、ページは次のようになります（他のすべてのhtmlタグなし）

h1
  h2
  h2
    h3
..etc

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow