HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLで改行する方法を解説！brタグとpreタグの使い分け

HTMLページに改行を追加するには、<br>タグまたは<pre>タグを使用します。<br>タグはページ内の指定した位置で改行を挿入し、<pre>タグはコードエディター上のテキストをそのままの形式で表示します。<pre>タグ内の改行は、すべて最終的なページに反映されます。

Webページを作成していると、「ここで改行したい」と思うことがあります。しかし、HTMLではEnterキーを押すだけでは改行されません。改行を実現するには、その目的のために用意されたHTMLタグを使用する必要があります。

この記事では、HTMLで改行を追加できる<br>タグと<pre>タグの2つの方法を詳しく解説します。それぞれの特徴や使い分けのポイントを、実際のコード例とともに見ていきましょう。

HTMLで改行する2つの方法

HTMLを記述していると、画面上に改行や余白を追加したい場面があります。適切な改行はWebページの可読性を大きく向上させます。HTMLで改行を追加する方法は、主に次の2つです。

  • <br>タグ：指定した位置で改行を挿入する。
  • <pre>タグ：エディターで記述したとおりの形式でテキストを表示する。

HTMLの<br>タグ

<br>タグを使うと、テキストの任意の位置に改行を追加できます。このタグは「改行（break）要素」とも呼ばれ、直前の要素の後に新しい行を挿入します。

基本的な構文は以下のとおりです。

<p>
Test<br>
</p>

この例では、「Test」という単語の後に改行が挿入されます。<br>タグには終了タグが存在せず、改行したい場所に<br>と記述するだけで使用できる点が特徴です。

次に、もう少し実践的な例を見てみましょう。住所の各行末に<br>タグを配置したコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>改行のサンプル</title>
</head>
<body>
  <div>
    <p>こちらが本文となる段落です。</p>

    <address>
      <span>〒123-4567</span><br>
      <span>東京都港区南麻布1-2-3</span><br>
      <span>サンプル株式会社</span>
    </address>

    <p>こちらも本文となる段落です。</p>
  </div>
</body>
</html>

このコードでは、<address>タグ内の各<span>タグの後に<br>タグを配置しています。これにより、住所の各項目（郵便番号・住所・会社名）がそれぞれ独立した行に表示されます。

HTMLの<pre>タグ

HTMLの<pre>タグは、整形済みテキスト（preformatted text）をコードに埋め込むための要素です。このタグを使うと、マークアップに入力したテキストがそのままの形で表示されます。つまり、テキスト中の改行はすべて最終的な表示にも反映されます。

<br>タグとは異なり、<pre>要素には開始タグと終了タグの両方があります。HTMLコードにおける<pre>タグの基本構文は以下のとおりです。

<pre>
これは一文です。
</pre>

このコードでは、「これは一文です。」というテキストが、<pre>タグの間に記述されたとおりの形式で表示されます。

<pre>タグの重要なポイントは、エディターで記述した内容がすべてそのまま反映されるという点です。

たとえば、コピー＆ペーストしたテキストには改行コードが含まれていないことがあります。その場合、貼り付けたテキストは期待どおりに表示されず、ブラウザはそれを1行の長い連続したテキストとして解釈します。Enterキーで物理的な改行を追加すれば、期待どおりの表示になります。

続いて、<pre>タグのより実践的な例を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>整形済みテキストのサンプル</title>
</head>
<body style="max-width: 800px; width: 100%;">
  <pre style="width: 100%;">
    <p>
    これは整形済みテキストとして表示される段落です。
    エディター上で改行した位置が、そのままブラウザの表示に反映されます。
    </p>

    <address>
      〒123-4567
      東京都港区南麻布1-2-3
      サンプル株式会社
    </address>
  </pre>
</body>
</html>

このコードでは、<body>タグの直後に<pre>タグを配置しています。タグ内のすべてのテキスト——HTMLの段落タグや<address>タグの内容も含めて——テキストエディター上で記述したとおりの形式で出力されます。

住所部分に<br>タグを使用していない点に注目してください。これは、テキストエディター上でEnterキーを使って改行を挿入しているためです。

通常、Enterキーによる改行はHTMLドキュメントに反映されません。しかし<pre>タグを使用しているため、Enterキーで作成した改行がそのまま最終的なドキュメントに表示されるのです。

まとめ

HTMLで改行を挿入する方法は、<br>と<pre>の2つあります。<br>タグは、特定の位置に1行だけ改行を追加したい場合に便利です。一方、<pre>タグは、テキストエディター上の見た目のままブロック全体を表示したい場合に適しています。

用途に応じて両者を上手に使い分けることで、より読みやすく整ったWebページを作成できます。まずは小さなコード例を実際に試しながら、それぞれの動作の違いを確認してみてください。

  1. HTMLのembedタグとは？使い方と主な属性をわかりやすく解説

    <embed>タグとは<embed>タグは、HTML文書の中に外部アプリケーションやプラグインコンテンツ（PDFファイル、動画、音声など）を埋め込むための要素です。開始タグのみで構成され、基本的に終了タグは不要です。<embed>タグで使用できる主な属性は以下の通りです。height：埋め込むコンテンツの高さをピクセル単位で指定します。src：埋め込む外部ファイルのアドレス（URL）を指定します。type：埋め込みコンテンツのメディアタイプ（MIMEタイプ）を指定します。例：「application/pdf」など。width：埋め込むコンテンツの幅をピクセル

  2. HTMLの<dfn>タグとは？定義用語のマークアップ方法を実例付きで解説

    HTMLの<dfn>タグは、専門用語や略語など「定義の対象となる語」が文書内で最初に登場する箇所を示すための要素です。多くのブラウザでは、<dfn>タグで囲まれた部分は斜体（イタリック体）で表示されます。 それでは、<dfn>タグの具体的な実装例を見ていきましょう。 コード例 <!DOCTYPE html> <html> <body> <h2>MCAの科目一覧</h2> <p><dfn title="Master of Computer Applications"