web-dev-qa-db-ja.com

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

HTML5のヘッダータグ内に段落要素を含めても問題ありませんか？

つまり、このマークアップはHTML5で正しいですか？これを使用することの欠点は何ですか？

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

そうでない場合、どうすればCSSでこの要素を正しくスタイルできますか？

csshtmlw3c
16
Slava Fomin II

実は違う。 W3Cによると、このマークアップは正しくありません。これは使用しないでください。

明記 ヘッダー要素の正しい内容は「フレージングコンテンツ」、つまりphrasing要素 通常の文字データと混合されます。

つまり、HTML5のヘッダータグ内で次の便利な要素を使用できます：a、em、strong、code、cite、span、br、img。 ここで完全なリストを参照 。

W3Cバリデーター このマークアップを検証しようとすると、次のエラーが発生します。このコンテキストでは、要素pは要素h1の子として許可されていません。

このマークアップを使用する上で考慮すべき主な欠点の1つは、 検索エンジン が見出しタグを誤って解析し、重要なデータを見落とす可能性があることです。したがって、この方法は [〜＃〜] seo [〜＃〜] の場合は良くありません。

SEOの結果を改善したい場合は、見出し要素の内部にテキストデータのみを含めることをお勧めします。ただし、いくつかのスタイルも適用する必要がある場合は、次のマークアップとCSSを使用できます。

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

<style type="text/css">
    h1 span {
        display: block;
    }
    h1 span.major {
        font-size: 50px;
        font-weight: bold;
    }
    h1 span.minor {
        font-size: 30px;
        font-style: italic;
    }
</style>

これについては jsfiddle を参照してください。

前述のように、spanタグはヘッダー要素（h1-h6）内で完全に有効です。また、 "display：block;"スタイルを適用して、ブロックレベルの要素としてレンダリングすることもできます（それぞれ別の行にあります）。 brタグを保存します。

もちろん、ユースケースに応じてこのCSSセレクターを変更する必要があります。

そして、はい、@ stUrbが言ったように、見出しの中で段落を使用することは意味的に正しくありません。 HTMLの背後にある最も重要なアイデアは、HTMLがセマンティクスが最初、後でプレゼンテーションでなければならないということです。

32
Slava Fomin II