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

見出しタグ内の段落要素の有効性

HTML5 のヘッダー タグ内に段落要素を含めることの妥当性は何ですか?次のマークアップについて考えてみましょう。

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

有効性と欠点

W3C によれば、そのようなマークアップは無効です。ヘッダー要素には、「a」、「em」、「code」、「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;
}

このマークアップ有効性を維持し、セマンティックなスタイル設定を可能にしながら、スパンのブロックレベルのレンダリングを可能にします。

セマンティックに関する考慮事項

有効ではありますが、見出し内で段落を使用することはセマンティック的に正しくありません。 HTML はセマンティクスを優先し、コンテンツの論理構造を反映する必要があります。見出しは、段落を含めるのではなく、文書の主要なトピックまたはセクションを伝える必要があります。

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