ウェブサイトに2つの<h1>
タグがあります。
すべてのページはサイトのロゴです
ページの記事の見出し。
1ページに複数の<h1>
タグを持つことは悪い習慣です。ロゴから<h1>
タグを削除する必要がありますか?
はい、ロゴからh1
タグを削除します。一般的なエラーは、スタイリングを使用するためだけに使用することですが、セマンティックの観点からは意味がありません。
h1
要素は、セクションの最高ランクの見出しを表すため、タイトルに使用するのが理にかなっています。
セマンティックHTMLとドキュメントのアウトラインに関心がある場合は、ロゴにh1
を使用することは理にかなっています(ロゴがサイト名を表すと仮定)。
どうして?次の3つの手順を参照してください。
見出しのない単純な一般的な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があります:
body
(セクショニングルート)article
nav
ドキュメントアウトラインでは、各セクションにエントリがあります(意味的には、見出しに相当します)。したがって、見出し要素を使用しないアウトラインは次のとおりです。
1. untitled <body>
1.1 untitled <article>
1.2 untitled <nav>
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"
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"
関連する質問に対する私の答え: