pタグ内にinputタグを入れ子とする理由について

Question

Formのテンプレートを調べていた際に、こちらのコードを拝見したのですが、「pタグ」内に「input」タグを入れ子としています。pタグは、テキストを囲うタグだと認識しているのですが、一文字も文字を格納していない、inputタグなどを囲うこっていることに、少々疑問を感じました。
formの要素であった場合などはまた違ってくるのでしょうか？
こちらの部分につきまして、ご助言など貰えましたら幸いです。

Answer 1

規則的には問題ないと思います。

許可されている内容 記述コンテンツ

<p>: 段落要素 - HTML: HyperText Markup Language | MDN

　

このカテゴリーに属する要素: <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> および通常の文字列です（空白文字だけで構成されたものを除く）。

記述コンテンツ | コンテンツカテゴリー - 開発者ガイド | MDN

---

セマンティックの観点からすると、p要素は段落を表すので、このinput要素が段落を表すならば適切な使い方である、と言えるのでしょうが……
私見ですが、これは、デザインのためだけのためにp要素使っているように見えました。その目的であればdiv要素を使うべきでしょう。

Comments

[Trainee2019]

私もデザインのためだけという意見に同意です。
（CSSのコメントに「/* Every row inside .login-container is defined with p tags */」とわざわざ入れている点からも）
このサンプルの作成者は、p要素にすると指定しなくとも改行が入るため、div要素より都合がよい(コーディングが楽だ)と思い使用したのではないかと推測します。

[ruuuu]

ご回答ありがとうございます。
状況によっては、pタグなどのタグもデザインとして利用することは、ありということですね

[miyabi_pudding]

横槍すみません。
質問者さん、逆です。
回答冒頭にもある通り、無しというわけではありませんが、

回答の、
> p要素は段落を表すので、このinput要素が段落を表すならば適切な使い方である、と言えるのでしょうが……
> 私見ですが、これは、デザインのためだけのためにp要素使っているように見えました。その目的であればdiv要素を使うべきでしょう。

ここに注目するといいかと。

[Trainee2019]

miyabi_takatsukさん、ありがとうございます。
言葉足らずで申し訳ありませんでした。

作成者は、あくまでもサンプルなので簡潔に記述したかったのだと思います。(サンプルは、表示されているフォーム内だけを意識すればよいので)

[miyabi_pudding]

Trainee2019さん > いえいえ、私のお節介だったかもですね　汗
質問者さんは、回答をみた時点での解釈だろうな、ともお見受けしたもので、それでコメントでした。

[miyabi_pudding]

ruuuuさん >
混乱させてしまい申し訳ございません。
回答者さんのおっしゃる通り、

・inputが段落なら、pを使うべき
・デザインのためだけなら、divを使うべき

というのは大前提なんです。
その上で、Trainee2019さんのおっしゃる通り、
他の開発や、状況により、（他のページで使ってるpをセレクタとしたcssを当てている、とか）pの方が都合がいい、ないし、せざるを得ない状況というのも、実際存在するので、
pにしているのかと思う、といった内容かと思います。

[Lhankor_Mhy]

>Trainee2019さん
>p要素にすると指定しなくとも改行が入るため、div要素より都合がよい(コーディングが楽だ)と思い使用した

些末な話で恐縮ですが、div要素の替わりにp要素を使っても、楽にはならないと思います。

div要素もp要素と同様にブロックを作るので改行します。
またご存知の通り、p要素はデフォルトのスタイルがついている( https://drafts.csswg.org/css2/sample.html )ため、これをリセットする手間が増えるはずですから、むしろ逆にdiv要素の方が楽なのではないかな、と思います。

[ruuuu]

補足頂きありがとうございます。
どうもタグそのものを段落として捉えることに、違和感があるのですよね...
取り敢えずは、状況に応じて使い分けていくことを念頭に置いておきたいと思います。