p要素の概要
p要素は、段落を指定するための要素です。
p要素で囲まれたテキストは1つの段落であることを示し、段落を使った見やすいページにする事ができます。
実機サンプルとサンプルコード
p要素で1段落を表示してみる
シンプルな例ですが、一つの段落に1行のテキストを書いてみます。
こんにちは！このサイトの名前は YWORKです。
<body>
<p>こんにちは！このサイトの名前は YWORKです。</p>
</body>
p要素で段落中に改行してみる
一つの段落に改行要素を入れて2行で書いてみます。
Hello! World
こんにちは！世界
<body>
<p>
Hello! World<br>
こんにちは！世界
</p>
</body>
2つの段落にinput要素を配置してみる
テキストだけでなく入力要素も段落にまとめることができます。
テキスト:
ボタン:
<body>
<p>テキスト: <input type="text" value="テキスト"></p>
<p>ボタン: <input type="button" value="ボタン"></p>
</body>
補足説明
この要素はブロック要素といわれ、この要素の中にテキストや他のインライン要素を入れることができますが、ブロック要素を入れるとエラーになります。 間違えても分かりづらく、エラーになってもコンソールなどで確認しないと気付かないこともあります。(ブラウザの表面上では分りません。)
ちなみにdiv要素はコンテナーになりますので入れてはいけません。 逆にdiv要素にp要素を入れることはできます。またtable要素中のth要素やtd要素のようなセル要素の中にも入れることができます。