web-dev-qa-db-ja.com

正しいh1タグは何ですか？

ウェブサイトに2つの<h1>タグがあります。

  1. すべてのページはサイトのロゴです

  2. ページの記事の見出し。

1ページに複数の<h1>タグを持つことは悪い習慣です。ロゴから<h1>タグを削除する必要がありますか？

seoh1
2
Fahad Uddin

はい、ロゴからh1タグを削除します。一般的なエラーは、スタイリングを使用するためだけに使用することですが、セマンティックの観点からは意味がありません。

h1要素は、セクションの最高ランクの見出しを表すため、タイトルに使用するのが理にかなっています。

3
marcanuy

セマンティックHTMLとドキュメントのアウトラインに関心がある場合は、ロゴにh1を使用することは理にかなっています（ロゴがサイト名を表すと仮定）。

どうして？次の3つの手順を参照してください。

1.見出しなし

見出しのない単純な一般的なHTML5ドキュメントは次のようになります。

<body>
  <header><!-- site-wide header --></header>
  <main><article><!-- page-specific main content --></article></main>
  <nav><!-- site-wide navigation --></nav>
  <footer><!-- site-wide footer --></footer>
</body>

3つのsectionsがあります：

  1. body（セクショニングルート）
  2. article
  3. nav

ドキュメントアウトラインでは、各セクションにエントリがあります（意味的には、見出しに相当します）。したがって、見出し要素を使用しないアウトラインは次のとおりです。

1. untitled <body>
  1.1 untitled <article>
  1.2 untitled <nav>

2. articleおよびnavの見出し付き

では、articleに見出し要素を付けましょう。どちらでもかまいませんが、ネストレベルに対応する見出し要素（この場合はh2：<h2>My first blog post</h2>）を使用することは HTML5推奨 です。

また、この例のために、navにも見出しを付けましょう（同じ理由でh2）。ただし、唯一のナビゲーションである場合は通常、必要ありません：<h2>Navigation</h2>

だから私たちは持っています：

<body>
  <header><!-- site-wide header --></header>
  <main>
    <article>
      <h2>My first blog post</h2>
    </article>
  </main>
  <nav>
    <h2>Navigation</h2>
  </nav>
  <footer><!-- site-wide footer --></footer>
</body>

ドキュメントのアウトラインは変更されず、ラベルが付けられます。

1. untitled <body>
  1.1 "My first blog post"
  1.2 "Navigation"

3.…そしてbody

しかし、無題のbodyエントリには何がありますか？それlongs見出しに！どのような見出しが得られるでしょうか？サイト名！どうして？ページにはページ固有のコンテンツ（メインコンテンツなど）だけではなく、サイト全体のコンテンツ（ヘッダー、フッター、ナビゲーションなど）も含まれているためです。また、サイトの見出しにより、これをアウトラインで表すことができます。

したがって、bodyセクショニングルートの見出しは通常、サイト名（<h1>Alice’s blog</h1>）であり、もちろんロゴ（<h1><img src="logo.png" alt="Alice’s blog" /></h1>）でもあります。

これにより、次のことができます。

<body>
  <header>
    <h1><img src="logo.png" alt="Alice’s blog" /></h1>
  </header>
  <main>
    <article>
      <h2>My first blog post</h2>
    </article>
  </main>
  <nav>
    <h2>Navigation</h2>
  </nav>
  <footer><!-- site-wide footer --></footer>
</body>

このアウトラインの結果：

1. "Alice’s blog"
  1.1 "My first blog post"
  1.2 "Navigation"

関連する質問に対する私の答え：

1
unor