HTMLに内容を記述する時、そのまま言葉を書いても表示はされます。
しかし、段落をつけたり、改行したりする場合にはタグを使わないとうまく表示されない場合があります。
今回は文章をきれいに整えるためのタグや記述の方法について解説していきます。
何もしていない状態
表示したい内容は<body>、</body>の間に記述していきます。
普通に文字を入力したときの参考例を表記しておきます。
何もしてない参考例
<!DOCTYPE HTML>
<html>
<head>
<title>記述の例</title>
</head>
<body>
<h1>見出し以外は何もしてませんよー</h1>
とりあえずここに文字を表示していきますが、なにもタグをつけていない状態で入っているので、折り返しや段落がめちゃくちゃです。
ここで改行し、段落を変えていますが、続けてまっすぐに見えていると思います。
</body>
</html>上記のものをブラウザで表示すると、段落がどこだかわからないと思います。
また、改行もどこでされているかもわかりません。
段落を設定するpタグ
段落の設定をするためには、<p>、</p>というタグを使用します。
一般的なブラウザではこの範囲の前でテキストが改行され、一行分の改行がされます。
記述の例
<!DOCTYPE HTML>
<html>
<head>
<title>記述の例</title>
</head>
<body>
<h1>段落を設定しました</h1>
<p>←ここから段落が変更してあります。↓一行追加されています。</p>
<p>次の文にも入れると、↓にまた空白が一行追加されます。</p>
※ここからは何も手をつけていないので、HTMLで普通の改行をしてもずっと一列になってしまいます。
ここで改行し、段落を変えていますが、なんの変化もなく続けて表示されていると思います。
</body>
</html>改行目的の何も間に入れていない<p></p>という記述は無視されるので、たくさん行間を開けたくてタグを入れまくっても表示されるのはひとつ分だけとなります。
なお、</p>タグは省略も可能ですが、どこまでが段落なのかがわかるようにきちんと記述しておくとよいでしょう。
改行<br>タグ
先ほどの<p></p>は段落を設定するために使いました。
では、任意の場所で改行を行う時にはどうしたらよいでしょうか。
改行をする場合には、<br>を使います。
このタグを入れた場所から改行されるようになります。
記述の例
<!DOCTYPE HTML>
<html>
<head>
<title>記述の例</title>
</head>
<body>
<h1>段落を設定しました</h1>
<p>←ここから段落が変更してあります。↓一行追加されています。</p>
<p>段落タグで囲んであります。<br>←ここに改行のためのタグが入っています。<br>段落のタグと違い、下が一行あくことがありません。</p>
</body>
</html><br>は</br>でも同じように改行できますが、わざわざ文字数を増やす必要もないでしょう。
また、改行タグをたくさん並べることで空白行を増やすことができますが、W３C（Web技術の標準化を行う非営利団体）の仕様では正しい使用方法ではありません。
レイアウトとして使う場合にはCSSを使うか、別の方法（違うタグを使うなど）を考えましょう。
コンテンツがブラウザウィンドウの横幅に収まらない場合には、自動的に改行するので、サイズを変えて確認してみてください。
改行させたくない！<nobr>
「ウィンドウサイズが変わっても改行させたくないんじゃぁ！！」
というやんちゃな人には<nobr>、</nobr>というタグを使いましょう。
このタグで挟んだテキストデータは改行されずに一行で表示されるようになります。
記述の例
<!DOCTYPE HTML>
<html>
<head>
<title>記述の例</title>
</head>
<body>
<h1>段落を設定しました</h1>
<p>←ここから段落が変更してあります。↓一行追加されています。</p>
<p>段落タグで囲んであります。<br>←ここに改行のためのタグが入っています。<br>段落のタグと違い、下が一行あくことがありません。↓の行には改行をさせないためのタグで挟んであります。違いが分かるように長い文章にしました。</p>
<nobr>この行はどれだけウィンドウサイズを小さくしても改行されずに表示されます。まっすぐに、ただ、まっすぐに・・・</nobr>
</body>
</html>上記の記述をブラウザで表示すると、改行させないタグを使った場合と使っていない場合では違いがあることがわかります。
ちなみに、このタグの間に<br>を入れれば、入れたところは改行されます。
HTMLに記述したとおりに表示<pre>
ここまで、段落の入れ方や改行の仕方について解説してきました。
でも、正直めどいし、とくに変更もしないからテキストデータを入力した通りに表示したいという方に、<pre></pre>というタグを紹介します。
このタグに挟まれたデータは整形済み（もう文章の形整ってますよ）という意味になり、そのまま表示されるようになります。
記述例
<!DOCTYPE HTML>
<html>
<head>
<title>記述の例</title>
</head>
<body>
<h1>段落を設定しました</h1>
<p>←ここから段落が変更してあります。↓一行追加されています。</p>
<p>段落タグで囲んであります。<br>←ここに改行のためのタグが入っています。<br>段落のタグと違い、下が一行あくことがありません。↓の行には改行をさせないためのタグで挟んであります。違いが分かるように長い文章にしました。</p>
<nobr>この行はどれだけウィンドウサイズを小さくしても改行されずに表示されます。まっすぐに、ただ、まっすぐに・・・</nobr>
<pre>
ここからはHTMLで記述した通りに表示されます。
段落も改行も打ち込んだそのままに表示されますので、
空白をつくるときに改行タグをつかわなくても改行されて
表示されています。
ただし、改行タグを入れると→<br>←このように改行されてしまいます。
また、ホントにそのままのため、文字の大きさや形もそのままです。
</pre>
</body>
</html>どうでしょうか。
表示してみると、他の文字とはフォントも何もかも違いますよね。
メモ帳で記入したそのままの文字が表示されるようになります。
まとめ
いかがでしたか？ここまでがテキストデータを記入する時によく使うタグとなります。
段落や改行をすることで文字がさらに見やすくなりますので、HTMLを扱う際には必ず覚えておきましょう。