質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.59%

【HTML】分裂増殖して表示されるp要素について

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,058
退会済みユーザー

退会済みユーザー

前提・実現したいこと

画像アイコンと文章をを含んだ簡単なリンクを作成しようとしています。
下記のように書いたところ、p要素が分裂・増殖してしまいました。cssの適用はしていません。なぜこのようになるのでしょうか?

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <p>1p
        <a>2a
            <img>
                        <p>3p</p>
        </a>
    </p>

</body>
</html>

表示

chrome開発者メニューのhtml

試したこと

一番上位のp要素を消すと、通常の表示になりました。

補足情報(FW/ツールのバージョンなど)

PyCharm 2018.2.4
macOS Mojave 10.14.2
chrome バージョン: 71.0.3578.98

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+4

なぜこのようになるのでしょうか?

<p>の中に<p>を入れることができないためです。どうにか解釈しようとして、内側の<p>の直前で外側の<p>が閉じられているものとされてしまいます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/07 10:07

    あ、pの中のpもですね。
    ちょっと自分の回答にも追記しておこう・・・。

    キャンセル

  • 2019/02/07 22:44

    ご回答ありがとうございます。
    pの中にpはダメなんですね。うまく修正することができました。
    どうもありがとうございました!

    キャンセル

checkベストアンサー

+3

HTML構文的にNGです。

含むことができる要素型    インライン要素(ただしa要素を除く)

pはブロック要素です。
上記のリンク見てもらえれば分かりますがpも含むことができる要素型:インライン要素です。(別回答の通り)
pの中にpがあるのもNGだしaの中にpがあるのもNGです。

※HTML5からはaタグにブロック要素含めるようになったので一部勘違いがありました。

pの中にpがあるのはNGです。

Eclipseでは下記のようなエラーが出ます。
イメージ説明

おそらくブラウザのデベロッパーツールで確認されているのだと思いますが、
改行コードが2つ入っているようなところも含めてデベロッパーツールが正しいHTMLに補正してくれています。

第三者的な観点(というか仕様)を得る際に構文チェックにもかけてみると良いです。
イメージ説明

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/07 10:49

    補足ありがとうございます。
    探してきたリンクが古かったですね…
    後程修正しておきます

    キャンセル

  • 2019/02/07 22:42

    ご回答ありがとうございます!
    自動で閉じるということがあるんですね。大変勉強になりました。
    また構文チェック用のサイトまで教えていただきありがとうございます。今まで好き勝手にHTMLを書いていたので、今後は毎回これを使っていきたいです。
    ありがとうございました。

    キャンセル

  • 2019/02/08 00:03

    構文を守ることはそれだけレイアウトやその後のメンテナンスを考えた時に優しい設計になります。
    私自身も完全に把握しているわけではないですが(回答に少し古い情報を出してしまいましたし)、構文チェックはなるべく流すようにしています。
    がんばってください。

    キャンセル

+3

他の方の回答に補足します。

HTML5的に言うと、p要素の内部に許可されている要素は「フレージングコンテンツ」になります。
p要素自身は「フローコンテンツ」であり「フレージングコンテンツ」ではないため、p要素はp要素を内部に持つことができません。
そして、p要素にはタグの省略が仕様として定義されています。

Categories:
_    Flow content.
_    Palpable content.
Content model:
_    Phrasing content.
Tag omission in text/html:
_    A p element's end tag can be omitted if the p element is immediately followed by an address, article, aside, blockquote, details, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, menu, nav, ol, p, pre, section, table, or ul element, or if there is no more content in the parent element and the parent element is an HTML element that is not an a, audio, del, ins, map, noscript, or video element, or an autonomous custom element.
HTML Standard

勝手訳「p要素は、直後に以下の要素が続く場合、閉じタグを省略できます。address, article, (略) p,(略)」

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/07 22:38

    ご回答ありがとうございます。
    「フローコンテンツ」「フレージングコンテンツ」という概念を知らなかったです。調べて理解したいと思います。
    また、参考リンクの添付もありがとうございます!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る