HTML 段落

❮ 前章へ 次章へ ❯

HTML文書は、段落に分割できます。

HTML 段落

HTML <p> 要素は、段落を定義します。

例

<p>This is a paragraph</p>
<p>This is another paragraph</p>

Try it Yourself ❯

ブラウザは、自動的に段落の前後に空の行を追加します。

HTML の表示

HTMLがどう表示されるかを確認することはできません。

画面の大小やウィンドウのサイズ変更で、異なる結果が得られます。

HTML では、HTML コードに余分なスペースや余分な行を追加することで、出力を変更することはできません。

ブラウザは、ページを表示する際に、余分なスペースや行を削除します。

スペースが何個あったとしても、改行が何行あったとしても、ただ１つのスペースとして数えます。

例

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser
ignores it.
</p>

Try it Yourself ❯

終了タグを忘れないでください

ほとんどのブラウザは、終了タグを忘れても HTML を正しくが表示します：

例

<p>This is a paragraph
<p>This is another paragraph

Try it Yourself ❯

上記の例は、ほとんどのブラウザで動作しますが、それに頼ってはいけません。

終了タグを忘れると、予期しない結果やエラーが発生する場合があります。

XHTML のような HTML の厳格なバージョンでは、終了タグを省略することはできません。

HTML 改行

&HTML <br> 要素は、改行を定義します：

新しい段落として開始せずに改行したい場合には <br> を使用します：

例

<p>This is<br>a para<br>graph with line breaks</p>

Try it Yourself ❯

<br> 要素は空の HTML 要素ですので終了タグはありません。

詩の問題

この詩は、一行で表示されます：

例

<p>This poem will display as one line:</p>
<p>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</p>

Try it Yourself ❯

HTML <pre> 要素

HTML <pre> 要素は、整形済みテキストを定義します。

<pre> 要素内のテキストは、固定幅フォント（通常は Courier）で表示され、 スペースと改行の双方とも無視されることはありません：

例

<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre>

Try it Yourself ❯

練習問題を自分でテストしてください！

Exercise 1 ❯    Exercise 2 ❯    Exercise 3 ❯    Exercise 4 ❯

HTML タグリファレンス

W3Schools のタグリファレンスには、HTML 要素とその属性に関する追加情報が含まれています。

タグ 説明
<p> 段落を定義する
<br> 1行の改行を挿入する
<pre> 整形済みテキストを定義する

❮ 前章へ 次章へ ❯