p要素

段落単位の文章を表しす場合に使用します。見出し以外の一般的なテキストに対して使うことが多いです。最も頻繁に使用されるHTMLかもしれません。

サンプルコード

<article>
	<h1>コーヒーの美味しい淹れ方</h1>
	<p><b class="lead">今回の記事では、美味しいコーヒーの淹れ方をご紹介します。是非一度、試してみてください。</b></p>
	<p>まずは、コーヒーの淹れ方にどのような方法があるかを復習してみましょう。...本文が続く...</p>
</article>

カテゴリー

フローコンテンツ、パルパブルコンテンツ
コンテンツモデル

フレージングコンテンツ
使用ケース

フローコンテンツが期待される場所

属性

グローバル属性: グローバル属性のみ使用することができます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

使用例

ブログの記事ページを想定したサンプルコード

次のHTMLコードは「コーヒーの淹れ方」をテーマにした記事を例したマークアップ例です。

<article>
	<header>
		<h1>コーヒーの淹れ方について</h1>
		<p><b class="lead">多くの方に親しまれているコーヒー。お仕事に、休日のひと時に、目覚めの一杯など様々な場面で飲む機会があります。<br>今回は、そんなコーヒーをより楽しむための美味しい入れ方をご紹介します。</b></p>
	</header>
	<section>
		<h2>まずは淹れ方選びから</h2>
		<p>一言で「コーヒー」と言っても、その淹れ方は様々です。<br>ペーパードリップを使った一般的な方法から、インスタントコーヒーでお手軽にいれる方法、少し手の込んだフレンチプレス。あなたはいつも...</p>
	</section>
	<section>
		<h2>フレンチプレスの淹れ方</h2>
		<p>まずは容器に挽いた豆を入れて、熱湯を容器の半分まで注ぎます。<br>この時、まだ蓋はしないようにしてください。<br>30秒ほど経過した後に...</p>
	</section>
	<section>
		<h2>ペーパードリップの淹れ方</h2>
		<p>まずは容器にペーパーフィルターをセットしますが、ここで折り方を少し工夫していきます。<br>通常であれば...</p>
	</section>
</article>

こちらの記事は役に立ちましたか？

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。