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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

2119閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/02/07 00:51

編集2019/02/07 00:51

前提・実現したいこと

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

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6</head> 7<body> 8 9 <p>1p 10 <a>2a 11 <img> 12 <p>3p</p> 13 </a> 14 </p> 15 16</body> 17</html>

表示

chrome開発者メニューのhtml

試したこと

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

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

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

投稿2019/02/07 01:02

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/02/07 01:07

あ、pの中のpもですね。 ちょっと自分の回答にも追記しておこう・・・。
退会済みユーザー

退会済みユーザー

2019/02/07 13:44

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

0

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

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 01:52

Lhankor_Mhy

総合スコア35867

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/02/07 13:38

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

0

ベストアンサー

HTML構文的にNGです。

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

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

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

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

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

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

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

投稿2019/02/07 01:03

編集2019/02/07 01:59
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2019/02/07 01:34

HTML5からは、ブロック要素も、a要素で囲うことができる、と見たことがあるのですが、 もしかして仕様変わったか、私の知識間違ってますかね・・・?
退会済みユーザー

退会済みユーザー

2019/02/07 01:41

上の方は合っています。 HTML5よりaタグの中にブロックを入れられるようになりました。 https://kuzlog.com/2017/02/03/906/
m.ts10806

2019/02/07 01:49

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

退会済みユーザー

2019/02/07 13:42

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

2019/02/07 15:03

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問