質問: ### 前提・実現したいこと 画像アイコンと文章をを含んだ簡単なリンクを作成しようとしています。 下記のように書いたところ、p要素が分裂・増殖してしまいました。cssの適用はしていません。なぜこのようになるのでしょうか? ### 該当のソースコード ``` Title 1p 2a 3p ``` ### 表示 ![chrome開発者メニューのhtml](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/2b32a89849e16c2081477f9e1851fffd.png) ### 試したこと 一番上位のp要素を消すと、通常の表示になりました。 ### 補足情報(FW/ツールのバージョンなど) PyCharm 2018.2.4 macOS Mojave 10.14.2 chrome バージョン: 71.0.3578.98
回答: HTML構文的にNGです。 * a要素・aタグとは > > 含むことができる要素型 インライン要素(ただしa要素を除く) > > > pはブロック要素です。 上記のリンク見てもらえれば分かりますがpも`含むことができる要素型:インライン要素`です。(別回答の通り) **pの中にpがあるのもNGだしaの中にpがあるのもNGです。** ※HTML5からはaタグにブロック要素含めるようになったので一部勘違いがありました。 pの中にpがあるのはNGです。 =============== Eclipseでは下記のようなエラーが出ます。 !イメージ説明 おそらくブラウザのデベロッパーツールで確認されているのだと思いますが、 改行コードが2つ入っているようなところも含めてデベロッパーツールが正しいHTMLに補正してくれています。 第三者的な観点(というか仕様)を得る際に構文チェックにもかけてみると良いです。 !イメージ説明