HTMLで改行する方法とは

HTMLを記述する場合に、改行する方法がいくつかあります。 主な方法として<br>タグを使用して改行する方法がありますが、br以外にも<p>タグなどのブロック要素タグを使う方法や、<pre>タグで改行する方法などがあります。

これらの改行の方法は、HTML文書内での改行の意味合いによって使い分けることが重要です。

この記事では、HTMLの改行の方法や使い分け方を知りたい方のために、HTMLの改行の役割・様々な改行の方法・CSSによる改行の調整などについて解説します。

HTMLとは？できることや初心者向けのタグの例、CSSについても紹介

HTMLのコードを記述する時にキーボードで入力した改行は、HTML文書を表示させた際には通常無視されます。

そのため、改行タグを使用するなどして文章の中で改行を行うことを明示する必要があります。

改行を明示的に表すのが<br>タグや<p>タグなどを使う方法です。文章の見た目を整えるために、改行をCSS（Cascading Style Sheets）で制御することもできます。

HTMLでよく使われるのは<br>タグを使う改行です。段落を区切らずに改行を挿入したい場合に利用され、文章の中で次の行に移ることができます。

もう1つの改行の種類として、<p>タグを始めとしたブロック要素の区切りを表す改行です。ひとまとまりの文章全体を段落で区切るために使用されます。これによって、文章が段落ごとに区切られ、読みやすくなります。

主な違いは、<br>タグが文章内での単純な改行を意味するのに対し、<p>タグなどのブロック要素は段落を作成して段落の論理的な構造を示すために使われるということです。

HTMLタグとは？HTMLタグ一覧など初心者向けに解説！

HTMLのdivタグとは？読み方・目的・使い方などを解説！

<br>タグで改行ができるのであれば、すべて<br>タグを使えばいいと思うかもしれません。しかし、それではHTMLの構造を明確にすることができず、分かりにくい文書になるでしょう。

HTMLで適切な方法による改行を行うことで、HTML文書が構造化され、可読性が向上します。これによりWebページや文書の読者がより内容を理解しやすくなるのです。

また、誤った改行方法を用いると、検索エンジンのクローラビリティを低下させてSEOに影響を及ぼすともいわれています。そのため、HTMLでは適切な改行を意識する必要があるのです。

＜br＞タグで改行する

ここでは、最も簡単に文章の中で改行を入れることができる<br>タグについて解説します。使用方法や、<br>タグで改行する意味、<br>タグを使う場合の注意事項について説明します。

HTML内でテキストを改行したい箇所に<br>タグを記入することで改行されます。<br>タグを使用すると、改行したい場所でテキストを分割し、次の行の先頭からテキストが再開されます。

■コード

やあ。
こんにちは。<br>
今日はいい天気ですね。

■実行結果

やあ。こんにちは。
今日はいい天気ですね。

HTMLのコードを記述する際、単純にEnterキーを押しただけでは、HTMLの表示のときに改行されません。そのため、上記の例で「やあ。」と「こんにちは。」は同一の行に表示されます。

<br>タグを記述することで、「こんにちは。」のあとに改行が挿入され、続く文章は次の行の先頭から始まります。

「改行」を英語で「line break」と表現することから、<br>はこの「break」を略したものです。

文章を書いていると、1行が長くなって文章が読みづらくなることがあります。その時に、<br>タグによる改行を使用して行を変えることで、文章を区切って読みやすくします。

改行をどの程度の頻度で入れるかは、その文書自体の求められ役割や文体、書く人の書き方にもよるため、明確な基準はありません。しかし、適切な改行を入れることで文章のリズムが整い、より明瞭に文章の意味を伝えることができます。

<br>タグを使用すれば簡単に改行を挿入できますが、<br>タグを使う際にはいくつかの注意点があります。

<br>タグを連続で使用すると、何も文字がない空の行を入れることができます。しかし、文章のまとまりを意味する段落の間を開けるために<br>を連続して使うことは避けましょう。段落を区切るときは、後述する<p>タグなどのブロック要素で文章を囲むことが推奨されています。

行間の余白を調整するために<br>タグを連続で使用するのも避けるべきです。<br>タグでレイアウトを調整しようとしても、ユーザの閲覧環境によって行間の広さが変わったり、文字サイズによって改行位置がおかしくなったりしてテキストが読みづらくなる場合があります。

＜p＞タグなどのブロック要素で改行する

次は、<p>タグなどのブロック要素を使用して改行する方法です。まずブロック要素について説明し、改行する方法や意味合い、注意点について解説します。

HTMLのブロック要素はページの構造を形成する要素です。開始タグと終了タグがセットで使用され、ページ全体の構造やセクション、大きなコンテンツの区切りなどを表します。ブロック要素の種類には、以下のようなものがあります。

■<p>タグ <p>タグは、文書内で段落を区切るために使います。<p>は「paragraph」（パラグラフ）の頭文字です。

<p>タグで分ける段落は、長い文章を意味のまとまりである程度の文章で分けたものです。文章の言いたいことがひと区切り付いたら段落を分けるのが一般的です。

■<div>タグ <div>タグは、特に意味を持たない文章の1区切りを表します。<p>タグでは文章的に意味のある段落に分けますが、<div>タグではHTML作成者が意図する区切りで自由に文章を一括りにすることができます。

例えば、一定の範囲を<div>タグで括ってCSSを適用するなどの使い方が考えられます。ただし、<div>タグを多用してしまうことで文書の意味が分かりづらくならないように気を付ける必要があります。

■<h1>タグ～<h6>タグ hタグは、HTML文書の中で見出しを意味するタグです。<h1>から<h6>まであり（h1・h2・h3・h4・h5・h6）、数字が大きいほど大きな見出しを表します。

■<table>タグ <table>タグは、行と列の組み合わせで表を作成するためのタグです。行を表す<tr>タグ、ヘッダー行を表す<th>タグ、セルを意味する<td>タグと一緒に使われます。

ブロック要素は、HTML内で縦に並ぶ性質を持っています。

そのため、開始タグでブロック要素を開始し終了タグを記述すると、それ以降の内容は次の行から始まります。つまり、改行された状態になります。

例えば<p>タグを使用すると、内容を<p>の開始タグと終了タグで囲めば改行することができます。

■コード

<p>こんにちは。</p>
<p>今日はいい天気ですね。</p>

■実行結果

こんにちは。
今日はいい天気ですね。

ブロック要素は、HTMLの構造を形作るために使用されます。それぞれのブロック要素が持つ意味を理解して使い分けることで、セクションや内容をグループ化することができます。

また、ブロック要素を組み合わせてHTML文書全体を構造化することで、CSSを使った統一感のあるスタイルの適用が可能です。

そのため、ブロック要素を用いた改行をすることは、意味のまとまりのあるブロックが終わり、次のブロックが始まることを意味するといえるでしょう。

ブロック要素を使う場合は、そのブロックが持つ意味をよく考えて使うようにしましょう。特に<p>タグや<div>タグはコードの記述者にとって自由に使いやすいブロックですが、文章の構成を意識して使わないとまとまりがない文書になってしまいます。

また、ブロック要素内での改行は<br>タグで行いますが、ブロック要素自体の最後に改行が挿入されるため、<br>タグと重複して意図しない余分なスペースが入らないように気を付けましょう。

＜pre＞タグで改行する

他にHTMLで改行する方法として、<pre>タグで改行する方法があります。<br>タグや、<p>タグなどのブロック要素とは意味合いが異なりますので、詳しく解説していきましょう。

<pre>タグとは、整形済みテキストを表します。つまり、通常HTMLコードの中では改行しても表示されないか半角スペースに置き換えられますが、<pre>タグ内で改行すると、その箇所に改行が挿入されます。

改行だけでなく、半角スペースやタブなどもそのまま表示されます。<pre>タグで囲った文章は、コーディングした形のまま表示されるのです。

■コード

<pre>
こんにちは。
今日はいい天気ですね。
</pre>

■実行結果

こんにちは。
今日はいい天気ですね。

<pre>タグは、主にプログラミングのソースコードなどを表示する際に使用します。記載したテキストがソースコードであることを意味する<code>タグと一緒に使われることもよくあります。

<pre>タグで使用できる改行は、<br>タグや<p>タグなどを使った文章や段落の区切りで使用する改行とは異なります。意味としては、整形済みコードが含んでいる改行が表示されているだけといえるでしょう。

そのため、HTML文書の中で単純な改行を挿入するために<pre>タグを使うことはないと考えていいでしょう。その場合は<br>タグや<p>タグなどを使って改行しましょう。

CSSによる改行の調整

HTMLのレイアウトを整えるために、CSSが使用されます。CSSではWebページ内の文字の色や大きさ、背景などの要素を設定することができ、改行の調整を行うこともできます。

CSSとは？概要や基本書式、具体的な記述方法について解説！

whitespaceはCSSのプロパティの1つで、改行・半角スペース・タブをどのように表示させるかを設定することができます。normal・nowrap・pre・pre-line・pre-wrapの5つの値があります。

■normal HTMLの一般的な表示です。<br>タグを使用した時や、文章が画面の横幅に到達したときに改行されます。

■nowrap <br>タグを使用した時は改行されますが、文章が画面の横幅に到達しても改行されません。

■pre HTMLコード内で行われた改行が反映されます。文章が画面の横幅に到達しても改行されません。

■pre-line HTMLコード内で行われた改行が反映され、半角スペースは反映されません。文章が画面の横幅に到達すると改行されます。

■pre-wrap HTMLコード内で行われた改行が反映され、半角スペースも反映されます。文章が画面の横幅に到達すると改行されます。

一般的に文章を書く際には、読みづらくなることを防ぐため、行の1文字目に「！」や「々」などの記号が行頭に来ないようにします。

HTML文書でもCSSのline-breakプロパティを使用することで、このような記号が行頭になるように改行させない禁則処理ルールを設定することができます。auto・loose・normal・strictの4つの値があります。

■auto line-breakプロパティの初期値です。ユーザエージェント（ブラウザなど）の規定の設定に準じ、行の長さに応じて改行します。

■loose 最低限の禁則処理ルールを適用し、制限の少ない規則に基づいて改行を行います。

■normal 最も一般的な禁則処理ルールを適用します。「！」「々」「…」「:」などが行の1文字目に送られなくなります。

■strict 最も厳格な禁則処理ルールを適用します。「ぁ」のような小文字のかなや、「-」「–」も行の1文字目に送られなくなります。

HTMLで改行する方法の意味を知って適切に使い分けよう

ここまで、HTMLで改行する様々な方法を説明してきました。改行の意味や目的を理解して、適切に改行することが重要であることが分かったと思います。

一般的には、<p>タグなどのブロック要素を使ってHTML文書全体の大きな構造を作り、ブロック要素の中で文章を読みやすくするために<br>タグを使うと考えるのが良いでしょう。

HTML文書全体の意味が分かりやすくなるように、適切な方法での改行を心掛けてコーディングするようにしましょう。

初心者におすすめのHTMLエディタ5選！便利な機能で開発効率もアップ

HTML/CSSを費用をかけずに学べるおすすめの入門書15選！