<p>タグの解説
<p>
は、文章の中で段落として扱いたい箇所に使用します。「p」という名称は、英語で段落を表す「paragraph(パラグラフ)」の略です。
文章の中で最も基礎的な要素は、見出しと段落です。この二つの要素があれば、単純な構造の文章であれば問題なく成立します。そのため、HTMLを学習する上で早い段階で覚えておくべきタグだと言えます。
段落は見た目を制御する目的ではなく、意味論的にひとつのまとまりを定義するものです。単にブロックレベルで括りたい場合は、<div>
を使用して下さい。
HTML Living Standardでは、セクショニングや文章構造の改善が進み、洗練された記述ができるようになりました。以前のように、適当に<div>
で囲むのではなく、主要な内容がはっきりと分かるように段落付けを行いましょう。
多くの場合、段落は<article>
や<section>
または<main>
の中に属し、見出しの後に続いていくつか連続して並びます。
<p>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<p>要素に指定できる属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<p>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。文章の中でひとつの段落としてまとまりを示したい場合に用います。短いコピーや機能の名称を表す断片的なテキストの場合は、<div>
などの要素を採用して下さい。
<body>
<p>段落を表すテキスト。段落を表すテキスト。</p>
<p>段落を表すテキスト。段落を表すテキスト。</p>
<p>段落を表すテキスト。段落を表すテキスト。</p>
</body>
見出しを持つ独立した記事であれば、次のように書くことができます。
<article>
<h1>文章の見出し</h1>
<p>段落を表すテキスト。段落を表すテキスト。</p>
<p>段落を表すテキスト。段落を表すテキスト。</p>
<p>段落を表すテキスト。段落を表すテキスト。</p>
</article>
段落の途中で改行したい場合は<br>
を使いますが、乱用は避けて下さい。縦書きの書籍を見れば分かるように、段落の中の文字列は改行されずに一連なりで配置されています。段落を閉じて新たな段落を始めるのは、ひとつの話題が終わり次の発言に移るタイミングです。レイアウト目的で隙間を空けたい場合はCSS(スタイルシート)で調整しましょう。
<article>
<h1>文章の見出し</h1>
<p>段落を表すテキスト。段落を表すテキスト。</p>
<p>
意味的にひとまとまりとみなせる範囲に適応します。<br>
ひとつの段落の中で何度も改行を行うのは不適切です。<br>
特に連続で改行を記述することは避けて下さい。<br>
</p>
<p>改行が必要になったら、なるべく段落を分けましょう。</p>
</article>
続いて、もう少し複雑な例を見てみましょう。ここで注目してほしいのは、コンテンツの主要な内容と関連する項目の意味付けの違いです。主要なコンテンツから外れた文章には、段落の格付けを与えていません。特にウェブサイトを制作する上で発生しがちな断片的な言葉や単語、コンテンツの文脈には直接関係のないフレーズや文字装飾は、対象から外してしまって問題ありません。
<article>
<header>
<h1>文章の見出し</h1>
<figure class="post-image">
<img src="/images/file" width="800px" height="420px">
<figcaption>©picture copyright.</figcaption>
</figure>
</header>
<section>
<h2>セクションの見出し</h2>
<p>段落は意味的にひとまとまりとみなせる範囲に適応します。長文であっても、ひとまとまりの意味であれば段落を分ける必要はありません。文章に対するマークアップは、見た目ではなく文脈を意識して下さい。これはアクセシビリティや機械解釈の観点からも大切なことなのです。</p>
<p>段落は意味的にひとまとまりとみなせる範囲に適応します。長文であっても、ひとまとまりの意味であれば段落を分ける必要はありません。文章に対するマークアップは、見た目ではなく文脈を意識して下さい。これはアクセシビリティや機械解釈の観点からも大切なことなのです。</p>
</section>
<section>
<h2>セクションの見出し</h2>
<p>段落は意味的にひとまとまりとみなせる範囲に適応します。</p>
<p>段落は意味的にひとまとまりとみなせる範囲に適応します。</p>
<p>段落は意味的にひとまとまりとみなせる範囲に適応します。</p>
</section>
<aside>
<h3>余談や関連リンクなど</h3>
<div><a href="#">カテゴリー名</a></div>
<div><a href="#">タグ名</a></div>
<div><a href="#">スポンサードリンクなど</a></div>
</aside>
<address>
著者名:XXXXX<br>
Mail: info@mail.your_address.jp<br>
URL: https://your_domainname.jp<br>
<address>
</article>