HTML/CSS

【HTML】pタグ内にdivタグなどのブロック要素は入れられない

HTMLでよく使われるpタグですが、実はpタグ内にdivタグなどのブロック要素を入れると意図しない挙動になります。

本記事では、pタグ内にdivタグなどのブロック要素入れた時どのような挙動をするのか解説しています。

ITエンジニア特化の転職サイト!
自社内開発求人に強い【クラウドリンク】

先輩くん
先輩くん
年収、休日数、労働環境等クラウドリンクが審査し、これらを通過した優良求人情報のみ紹介しているよ!
後輩ちゃん
後輩ちゃん
100%自社内開発の求人だから、SESのように職場環境が変わらないのがいいね!
簡単30秒で無料登録!

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

pタグ内にdivタグを入れてみる

実際にpタグ内にdivタグを入れた時のHTMLの表示を確認してみましょう。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p style="color:red">
        pタグに書かれたテキスト(先頭)
        <div>divタグに書かれたテキスト</div>
        pタグに書かれたテキスト(末尾)
    </p>
</body>
</html>

上記コードの表示は、そのままHTMLを読み解くとpタグに書かれているテキストは全て赤文字になりそうですが、実際は「pタグに書かれたテキスト(先頭)」のみ赤文字になります。

表示結果
表示結果

下記のコードが実際に表示されているコードになります。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p style="color:red">pタグに書かれたテキスト(先頭)</p>
    <div>divタグに書かれたテキスト</div>
    pタグに書かれたテキスト(末尾)
    <p></p>
</body>
</html>

pタグの閉じタグがdivタグの前に自動挿入されていることが分かります。なぜ、このようにHTMLコードが勝手に変換されるのか、その答えはMDNに記載されています。

開始タグは必須。後続する要素が <address><article><aside><blockquote><div><dl><fieldset><footer><form><h1><h2><h3><h4><h5><h6><header><hr><menu><nav><ol><pre><section><table><ul> または別の <p> 要素のいずれかである、または親要素内で他のコンテンツがなく親要素が <a> 要素ではない場合は終了タグを省略することが可能。

引用元:MDN

上記の内容はMDNから引用してきたもので、要約すると上記のタグがpタグ内に配置されていた場合はpタグの終了タグは省略することができるということになります。

つまり、先ほどのコードはpタグ内にdivタグを配置していたため、閉じタグが省略されていたことになります。他のタグでも試してみましょう。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div style="border:2px solid #000">
    <p style="color:red">
        pタグに書かれたテキスト(先頭)
        <h3>h3タグに書かれたテキスト</h3>
        pタグに書かれたテキスト(末尾)
    </p>
</div>
<div style="border:2px solid #000">
    <p style="color:blue">
        pタグに書かれたテキスト(先頭)
        <header>headerタグに書かれたテキスト</header>
        pタグに書かれたテキスト(末尾)
    </p>
</div>
<div style="border:2px solid #000">
    <p style="color:green">
        pタグに書かれたテキスト(先頭)
        <section>sectionタグに書かれたテキスト</section>
        pタグに書かれたテキスト(末尾)
    </p>
</div>
</body>
</html>
表示結果
表示結果

同じ結果になりましたね!このようにpタグで意図しない挙動をした時は上記に記載されているタグが内部で使用されていないか確認してみましょう。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村