備忘録的プログラミングリファレンス

<p> エレメント

 <p> エレメントは、段落を示すエレメントです。
 テキストの段落ごとに<p>エレメントで囲みます。改行のみには<br>エレメントを使います。

 ブラウザでは、テキストは<p>エレメントや<br>エレメントを使わないと以下のように段落も改行ない状態で表示されます。

例:<p>エレメントなしでテキストを表示
HTMLテキストでは
今日は晴れです。
気持ちのいい天気です。

調子はいかかですか?
私はとても調子がいいです。

かしこ
ブラウザ上での表示
今日は晴れです。 気持ちのいい天気です。 調子はいかかですか? 私はとても調子がいいです。 かしこ

 「HTMLテキスト」上での段落や改行が「ブラウザでの表示」ではなくなっていることが分かると思います。
 <p>エレメントや<br>エレメントによって、ブラウザで段落や改行が表示されるのです。

 使い方としては、改行ごとに<p>を使用する場合もありまし、段落は<p>を使い、改行は<br>エレメントを挿入することもあります。
 詳しくは、Exampleを参照してください。

HTMLテキストの編集タグエレメント

改行を含まないテキスト編集用タグエレメント

 HTMLテキストを編集するためのタグで、改行がなく<p>といったブロックエレメントに含めるものは以下があります。

リンク
<a>URLのリンク
レイアウト、装飾
<span>テキストの一部を囲むためのエレメント。テキストの装飾のために使われることが多い
引用や定義、出典を明示
<abbr>略語
<q>引用。引用符 "" が付加
<cite>出典、参照先
<dfn>定義語
プログラム、数式、科学式、日誌
<code>プログラムコード
<del>削除ずみ
<ins>新たに追記
<samp>プログラム例、出力例、変数
<var>プログラムコードの変数や引数
<kbd>キーボードによる入力例
<sub>下つき小文字
<sup>上つき小文字

段落になるテキスト編集用タグエレメント

 HTMLテキストを編集するためのタグで<p>と同じように段落になるものは以下があります。

ヘッダー
<h1>-<h6>ヘッダー
引用や定義、出典を明示
<address>メールアドレスや連絡先
<blockquote>引用。段落ごと
プログラム、数式、科学式、日誌
<pre>プログラムコード

 その他に、横線を入れるための<hr>があります。

JavaScript

 <p> エレメントの定義については、HTMLParagraphElement インターフェイスを参照してください。

Example

 <p>、<br>エレメントの例です。「テキスト編集」欄で編集したテキストを<p>、<br>エレメントのあるHTMLに変換します。

 「テキスト編集」欄にテキストを編集して、「変換」ボタンをクリックしてください。HTMLに変換されたテキストが「HTML、<p>、<br>に変換」に表示されます。

 「テキスト編集」欄はテキスト編集のみを目的としています。1つの改行は<br>エレメントに、2回連続する改行は段落<p>に変換します。

テキスト編集
HTML、<p>、<br>に変換
Webページとして表示