4

通常、HTML5ドキュメントをコーディングするときは、次の構文を使用します。

<header class="site-header">
    <hgroup class="site-brand">
        <h1 class="brand-name">
            Brand Name
        </h1>
        <h2 class="brans-slogan">
            Awesome Slogan
        </h2>
    </hgroup>
</header>
<article>
    <header class="article-header">
        <h1 class="article-title">Article Header</h1>
    </header>
    [... content ...]
</article>

headerこれはサイトヘッダーの正しいタグのように見えましたが、仕様を読んでこのコードの概要を説明した後、2つの欠点がありました。

  • headerタグはコンテンツを第1レベルにし、記事のタイトルは第2レベルにします
  • サイトヘッダーには、ページが誰に属しているかをユーザーに通知することが目的であるため、見出しがまったく含まれていない場合があります。

最善のアプローチは何でしょうか？

4

2 に答える 2

1

最初の問題は、h1 タグが 2 つあることです。これは適切なセマンティック マークアップではありません。ヘッダータグについては正しいので、その領域に高レベルの h タグを配置することをお勧めします。

そうは言っても、あなたの最初の質問はデザインとコンテンツ アーキテクチャの問題です。記事の本文で h1 を使用する場合は、ページのヘッダーで使用する別のタグを選択する必要があります。

仕様には、「ヘッダー要素には、通常、セクションの紹介資料やナビゲーション補助などのコンテンツとともに、セクションの見出し (h1-h6 要素または hgroup 要素) が含まれます」と記載されています。

ただし、そうする必要はありません。h1 タグ (およびタイトル タグ) は、ページの主要なセマンティック インデックスです。2 つの h1 タグまたはヘッダー タグは必要ありませんが、これら 2 つのタグを一緒にする必要はありません。

于 2013-01-31T17:50:25.910 に答える
0

headerこの例での の使用は問題ありません。

ただし、ここでは実際には必要ありません。h1-h6とのみを含める場合は、それがヘッダーであることを指定する必要hgroupはありません。定義により既に明確になっているためです。ヘッダーに属すべきかメイン コンテンツに属すべきかが必ずしも明確ではない追加コンテンツを含めたい場合に便利です。header

ただし、見出しのみに使用しても害はないheaderので、必要に応じてそのまま使用してください。CSS/JS フックに必要であり、将来追加のヘッダー コンテンツが含まれる可能性があります。

headerタグはそのコンテンツを第 1 レベルにし、記事のタイトルを第 2 レベルにします

意味がわかりません。このheader要素はドキュメントのアウトラインには影響しません。これは、紹介コンテンツとメイン コンテンツを区別する方法です。

サイト ヘッダーには、ページが誰のものであるかをユーザーに伝えることが目的であるため、見出しがまったく含まれていない場合があります。

要素に見出しが含まれている必要はheaderありません。たとえば、次の例は問題ありません。

<article>
  <header>I visited Berlin last week and in this post I document what I liked about it.</header>
  <p>…&lt;/p>
</article>

このfooter要素は似ており、コンテンツによっては両方の要素が適している場合があります。

記事の著者に帰属させたい場合は、footer.

于 2013-02-01T16:43:50.797 に答える