HTML Living Standard/p

p 要素

<p> 要素は、HTML文書で段落を表すために使用されます。段落はテキストを論理的にグループ化し、文書を読みやすくするための基本的なブロック要素です。

基本構造

以下は、<p> 要素を使用した基本的な例です：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Paragraph Element Example</title>
  </head>
  <body>
    <p>This is a paragraph of text in an HTML document.</p>
    <p>Each &lt;p&gt; element creates a new paragraph.</p>
  </body>
</html>

<p> 要素は単独で使用され、段落同士の間には自動的に適切な余白が設定されます。

特徴

ブロックレベル要素:
<p> 要素はブロックレベル要素であり、文書構造内で新しいラインに配置されます。

ネスト不可:

<p> 要素の中に他の <p> 要素をネストすることはできません。

<!-- 以下は不正な例 -->
<p>This is a paragraph <p>with another paragraph inside it.</p></p>

使用例

単純な段落

<p>This is a simple paragraph.</p>

インライン要素を含む段落

<p> 要素の中には、インライン要素（例：<a>、<strong>、<em> など）を配置することができます：

<p>You can include <strong>bold</strong> or <em>italic</em> text in a paragraph.</p>
<p>Visit <a href="https://example.com">Example Website</a> for more information.</p>

空白や改行の扱い

HTMLでは、複数の空白や改行は自動的に1つの空白にまとめられます：

<p>
This    text
has multiple spaces
and line breaks.
</p>
<!-- ブラウザ表示：This text has multiple spaces and line breaks. -->

長い文章

段落内のテキストが長くても問題ありません。HTMLでは自動的に改行が処理されます：

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac libero nec velit interdum blandit. Mauris at dictum libero. Curabitur id urna nec eros hendrerit vehicula. Etiam suscipit nulla ut nisl venenatis, vel facilisis justo consequat.</p>

注意点

セマンティクスの維持: 段落を意味するテキストには常に <p> 要素を使用し、他のブロック要素で代用しないようにします。
空の段落の使用回避: 空の <p> 要素を使用すると、意図しない空白が生成される場合があります。代わりにCSSでマージンやパディングを調整してください：
```

<p></p>

<div style="margin-top: 20px;"></div>
```
ネスト違反の防止: <p> 要素内にブロック要素（例：<div>、<section>）を直接配置することは避けるべきです。必要に応じて文書構造を再設計してください。

練習問題

練習1: <p> 要素を使用して、3つの段落を作成し、それぞれに異なるテキストを記述してください。
練習2: <p> 要素内にリンクと強調テキストを含めて、新しい段落を作成してください。