SYNCER

SYNCER

＜p要素＞ - 段落

公開日:

p要素は段落のまとまりを表す要素です。

概要

名前
p (Paragraph)
カテゴリー
Flow content
Palpable content
配置できる場所
Flow contentが期待される場所。
コンテンツモデル
Phrasing content。
タグの省略
後続の要素が、address要素、article要素、aside要素、blockquote要素、details要素、div要素、dl要素、fieldset要素、figcaption要素、figure要素、footer要素、form要素、h1〜h6要素、header要素、hgroup要素、hr要素、main要素、menu要素、nav要素、ol要素、p要素、pre要素、section要素、table要素、ul要素でない場合に終了タグを省略できる。
親要素に自身(p要素)以外の要素がなく、かつ、親要素がa要素、audio要素、del要素、ins要素、map要素、noscript要素、video要素でない場合に終了タグを省略できる。
DOM Interface
HTMLParagraphElement
デフォルトのスタイル
p {
	display: block;
	-webkit-margin-before: 1em;
	-webkit-margin-after: 1em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
}
仕様書
https://html.spec.whatwg.org/multipage/semantics.html#the-p-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜p要素＞ - 段落</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/p/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>p要素は段落のまとまりを表します。文章の段落をp要素で囲みましょう。</p>
<p>さて、インターネットのテキストでは段落ごとに先頭文字のインデントを下げると逆に見づらくなるので、下げる必要はないと思います。</p>
<p>p要素は何のpかというと、paragraph(パラグラフ)のpなんです。</p>

	</body>
</html>

デモを開く

デモ

</head><body>までを含めて下さい。

<body> <div id="___body">

</div> <script>...</script> </body> </html>

<style>

</style>

<script>

</script>