HTML

初心者に分かりやすく解説|【HTML】の改行方法まとめ

改行しようと思うとENTERキーを押したくなりませんか?
HTMLの改行はENTERではうまくできません。

今回はHTMLの改行について解説します。

HTMLの改行

改行は、テキストや要素を適切に表示するために欠かせない機能の一つです。
HTMLで改行するには、pタグ・brタグ・preタグのいずれかを使用します。
1つずつ解説します。

pタグ

<p>タグは段落を作成するための要素です。
通常、<p>タグ内にテキストを記述すると、ブラウザは自動的に段落を作成し、それぞれの段落を別の行に表示します。
以下のように、開始タグと終了タグで囲んで記述します。

<p>これは最初の段落です。</p>
<p>これは2つ目の段落です。</p>

上記のコードでは、2つの<p>タグが使用され、それぞれの段落が別々の行に表示されます。

brタグ

<br>タグは改行を表すための要素です。
このタグは単独で使用され、改行したい場所に直接挿入します。

<p>これは<br>改行された文です。</p>

<br>タグを使用すると、<br>タグの位置で改行が行われます。
上記の例では、<br>タグの位置で改行された文が表示されます。

preタグ

<pre>タグは、テキストをそのままの形式で表示するための要素です。
このタグを使用すると、改行やスペースなどの空白文字もそのまま表示されます。

<pre>
これは
改行された文です。
</pre>

<pre>タグで囲まれたテキストは、そのままの形式で表示されます。
改行やスペースもコード内で指定したとおりに表示されます。

上記の例では、<pre>タグ内の改行がブラウザ上でもそのまま表示されます。

まとめ

以上が、HTMLも改行方法になります。
これらのタグを使うことで、異なる方法で改行を実現することができます。
<p>タグは段落を作成し、<br>タグは行内で改行を行い、<pre>タグはテキストの形式を維持しながら改行を行います。
使用するタグは、文脈や表示の要件に応じて適切に選択してください。

-HTML