どーも、こんばんは。
先日尻合いから「<p>と<br>は何が違うの？」と聞かれたのでそれについて語ります。
その前に<br>というタグについても語っておきましょう。
1．<br>とは改行である
普段Wordなどで文章を書いている人は勿論、メモ帳にメモを取っている人は何も考えずに改行していることでしょう。
なんせエンターキーを押すだけで改行が出来るのですからむしろ考える方が変というものです。
しかしhtmlはエンターキーを押して改行していることを改行していると認識しません。
例えば
これをウェブ上で表示した場合
こうなるわけですね。
ですから「ここで改行してね！」という指示をする必要があります。
それが<br>タグであり、<br>タグを打ち込んだ場所で改行することになります。
上のような私たちにとってはまったく改行していないように見える文章でも
<br>タグがあるのでそこで改行してくれるわけですね。
2．<p>タグも改行なのでは？
では<p>タグはどうかというと、<p>タグも改行してくれますね。
例の尻合いはどうしていたかは知りませんが、<p>タグは<p>で始まって</p>で終わります。
これを表示すると
このようになります。
<br>と違い間に1行挟んであり、記述的には
こんにちは！<br><br>私は風悟といいます！
と同様です。
「2回勝手に改行してくれるけど、文章の最初と最初にいちいち<p></p>と入力しなければならないなら<br><br>って入力した方が分かり易いよね」
と思うでしょう。
確かにその通りです。
が、実は<p>タグは改行ではないのです。
3．<p>タグは段落を意味する
そうです。<p>は改行ではなく段落なのです。
つまり「2回改行している」というのは確かに事実ではありますが
「こんにちは！」と「私は風悟といいます！」は別の段落なので1行間を開けている、というのが正解なのです。
しかしそれがわかったとしても、別の段落だとしても、やはり<br><br>と書いた方が楽なのでは？ ということは変わりません。
4．<p>タグは属性が使える
前回は属性について語りました。
「border="1"」やら「width="500"」やら、テーブルの講座でも属性が出てきました。
<p>タグでも属性が使えるのです。
使えることでどういうメリットになるかを書いていきましょう。
例えばこのように表示したいと考えたとしましょう。
これを<br>で書いていくと
<div align="center">こんにちは！
<br>私は風悟といいます！</div>
<br>
<br><div align="left">今日は非常にいい天気で4月とは思えない程に暑く、身体を動かすとたくさん汗をかきました！
<br>今からこれほど暑いとこの先が思いやられますね！
<br>
<br>それはそうとテスト文章としてこうして文章を書くのは辛いです。</div>
<br>
<br><div align="right">意味のない改行！
<br>うおおおおおおお！！！！！</div>
こうなります。
それぞれの段落で<div align="〇">でテキストの位置を設定しています。
これを<p>タグを使用していくと
<p align="center">こんにちは！
<br>私は風悟といいます！</p>
<p align="left">今日は非常にいい天気で4月とは思えない程に暑く、身体を動かすとたくさん汗をかきました！
<br>今からこれほど暑いとこの先が思いやられますね！
<br>
<br>それはそうとテスト文章としてこうして文章を書くのは辛いです。</p>
<p align="right">意味のない改行！
<br>うおおおおおおお！！！！！</p>
こうなります。
<p align="〇">とすることで、この段落では文字を中央、左、右寄せにするという指定が出来るのです。
5．しかしこのレベルの記述では<p>を使うメリットも薄い
確かに<br>の数が減って、<div>を使わずにテキスト位置が変わりました。
が、それでもあまりメリットがないように見えます。
<p>を有効に活用するにはCSSが必須と言えるのかもしれません。
