HTML5 の見出しタグ内に段落要素をネストすることは有効ですか?

HTML5 の見出し内に段落をネストできますか? (H1 内の P)

質問:

HTML5 の見出し (H1) タグ内で段落 (P) 要素を使用することは有効ですか?

回答:

いいえ、W3C ガイドラインによれば、これは無効です。ヘッダー要素には、A、EM、SPAN などの要素を含む「フレーズ コンテンツ」のみを含める必要があります。

ネストされた段落を使用する欠点:

• 検索エンジン見出しが正しく解析されず、重要なデータが失われる可能性があります。これは SEO に影響を与える可能性があります。
• 段落は見出しと意味的に関連していないため、HTML の「意味が先、表示は後で」の原則に違反します。

代替スタイル オプション:

見出し内の要素のスタイルを設定する必要がある場合は、代わりに SPAN などの有効な要素を使用してください。次に、次のように CSS スタイルをこれらの要素に適用できます。

<h1>
    <span class="major">Major part</span>
    <span class="minor">Minor part</span>
</h1>

h1 span {
    display: block;
}

h1 span.major {
    font-size: 50px;
    font-weight: bold;
}

h1 span.minor {
    font-size: 30px;
    font-style: italic;
}

このアプローチでは、セマンティック マークアップを使用しながら、要素を必要に応じてスタイル設定できます。特定の使用例に応じて、CSS セレクターを忘れずに調整してください。

以上がHTML5 の見出しタグ内に段落要素をネストすることは有効ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。