【HTML】p要素の使い方【文書内のテキスト段落を表します】

Program

テキストは、p要素を使って段落ごとに記載していきましょう。

p要素の基本的な使い方

まずは、以下のプログラムと、ブラウザでの表示結果を見てください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>p要素</title>
</head>
<body>
    <h1>お問い合せ</h1>
    <p>お問い合せは、以下のフォームにご記入いただき送信ください。</p>
</body>
</html>

body要素の中に、「見出し」を示すh1要素と「段落」を示すp要素があります。

p要素の中には、「お問い合せは、以下のフォームにご記入いただき送信ください。」と書かれた文章があります。

このため、ブラウザでの表示結果の通り、「見出し」として記述されたフレーズと、「段落」として記述された文章とを、明確に示すことができました。

「段落(p要素)」を連続して記載する場合

「段落(p要素)」を連続して記載してみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>p要素</title>
</head>
<body>
    <h1>お問い合せ</h1>
    <p>お問い合せは、以下のフォームにご記入いただき送信ください。</p>
    <p>送信いただいた内容につきましては、後日こちらから回答させていただきます。</p>
</body>
</html>

先ほどのプログラムに、「段落(p要素)」を一つ追加しました。

追加したp要素の中には、「送信いただいた内容につきましては、後日こちらから回答させていただきます。」と書かれた文章があります。

このため、ブラウザでの表示結果の通り、2つの「段落(p要素)」が文書の縦方向に、違う段落として表示されています。

複数の文章を1つの「段落(p要素)」に含めた場合

複数の文章を1つの「段落(p要素)」に含めた場合について、見てみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>p要素</title>
</head>
<body>
    <h1>お問い合せ1</h1>
    <p>お問い合せは、以下のフォームにご記入いただき送信ください。</p>
    <p>送信いただいた内容につきましては、後日こちらから回答させていただきます。</p>
    <h1>お問い合せ2</h1>
    <p>お問い合せは、以下のフォームにご記入いただき送信ください。送信いただいた内容につきましては、後日こちらから回答させていただきます。</p>
</body>
</html>

先ほどのプログラムに、h1要素とp要素を追加しました。

追加したp要素では、先に示した2つの文章を連続で記述しています。

そして、ブラウザの表示結果に示す通り、1つの段落の中で、2つの文章を一連のテキストとして示すことができました。

以上から、ブラウザ上におけるテキスト情報(文章)の表示について、同一の段落として示すべきか、あるいは、異なる段落で示すべきか、デザイン面での検討も行いつつ、p要素によるマークアップを行うこととなります。

各種ブラウザでの表示結果

p要素の各種ブラウザにおける最新のサポート状況は、以下のようになってます。

【HTML】Internet ExplorerGoogle ChromeMicrosoft EdgeSafariFirefoxOpera
p要素
〇:サポートあり、△:制限あり、×:サポートなし。?:不明

以上、p要素の使い方について、ご参考になさってくださいね。

タイトルとURLをコピーしました