58

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

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

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

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

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

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

例：

  • Joel Spolskyは<h1>記事のタイトルに使用し、サイトのタイトルにはアンカーを使用します
  • Jeff Atwoodは、記事のタイトルとサイトのタイトルにアンカーを使用していません<h1>。<h2>
  • 37 SignalsのSVNは<h1>、サイトタイトルと記事タイトルのアンカーに使用します

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

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

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

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

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

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

4

8 に答える 8

32

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

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

  • ドキュメントが基本的に独立したものである場合 (たとえば、ジュネーブの見どころやアクティビティなど)、最上位の見出しはおそらくタイトルと同じです。

  • それがコレクションの一部である場合、たとえばペットに関するページのコレクションの犬に関するセクションの場合、最上位の見出しはある程度の文脈を想定する必要があります。<h1>Dogs</h1> タイトルはどのような文脈でも機能するはずですが、「犬 - ペットへのガイド」と書いてください。

于 2008-11-06T12:30:34.153 に答える
13

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

于 2008-11-08T17:05:33.647 に答える
12

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

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

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

于 2008-11-06T12:29:48.803 に答える
3

ウィキペディアでは、h1-Tag に記事名と h2 で始まるドキュメントの見出しが含まれています。Wikipedia という名前は、html-header の title-tag の一部です。私もその通りだと思います。したがって、ブログでは、あなたが示した例で Joel Spolsky を使用したいと思います。

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

于 2008-11-06T12:33:10.420 に答える
2

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

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

<h2>Sub Header</h2>

私は使用できます

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

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

  • 最上位ヘッダー
    • サブヘッダー
      • サブサブヘッダー
    • サブヘッダー
    • サブヘッダー
  • 最上位ヘッダー
    • サブヘッダー
      • サブサブヘッダー
      • サブサブヘッダー
    • サブヘッダー
      :

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ではありません。適用できるのは、スタイルを特定の構造要素に適用してレイアウトを生成しますが、一方を他方と混同しないでください)。それでも、コンピューターはページのタイトルが何であるかを認識します。タイトル要素のおかげで認識できます。

于 2008-11-06T12:34:39.327 に答える
1

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

両方。この記事は参考になります: HTML5 時代の複数の H1 タグについての真実。

于 2016-01-25T05:48:15.837 に答える
1

ブログなどの一般的な Web サイトの場合、 に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は、サイトのすべてのページで繰り返されます。ページ ナビゲーションではなく、サイト ナビゲーションを表します。違いが大事！{ページ ナビゲーションは、目次 (ウィキペディアの記事など) または長い記事のページネーションになります。}

記事のタイトルを のように使用する場合h1、サイト ナビゲーションはこの見出しの範囲内になります。

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

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

h1記事のタイトルに使用することによる別の問題は、通常、最初の見出しの前にコンテンツがあることです。たとえば、サイトのタイトルやその他のものを含むサイトのヘッダーです。見出しを介してナビゲートするユーザーにとって、この最初のコンテンツは「見えない」でしょう。したがって、個々のブロックごとに独自の見出しを付けるのは良い習慣です。

HTML5 では、セクショニング/アウトライン アルゴリズムでこれを形式化しています。// section/のおかげで、HTML 4.01 で発生した可能性のある多くのアウトラインの問題が解決されます。これは、コンテンツの順序が (ほとんど) 自由になり、望まない場合は実際の見出しを「発明」する必要がないためです。しかし、HTML5 では、サイトの見出しは、セクショニング要素/ルートの子ではなく、子である必要があります。他のすべてのセクションは、このサイトの見出しの範囲内です。articlenavasideh1body

于 2013-06-22T01:06:07.287 に答える
-4

1つだけある必要があり、1つだけでなければなりません

h1
; 通常、これはページのタイトルです。次に、h2、h3 などに従う必要があります。

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

h1
  h2
  h2
    h3
..等
于 2008-11-06T12:28:48.777 に答える