pタグとbrタグについて考えてみる

pってそもそも何なんだ

pは paragraph(ぱらぐらふ) のpです。webの標準言語は英語ですので、見た目のそれも 英語のGrammar に則っていることがほとんどです。
* Grammar (ぐらまー) = 文法

一般的な英字新聞ってこんな感じ ↓

わかりやすくすると ↓

これがパラグラフ。
pタグの存在意義というのはまさしくこのためです
こうして英字新聞をイメージするとpタグの使い所がわかるのではないでしょうか。

pタグの初期値

htmlタグというのは文書内容・文書構造の 意味・定義 を司るものですが、それぞれに必ず 見た目の初期値 を持っています。

この初期値は CSS が担ってます。「何も意図的変更を加えなければ勝手にそうなる」ってのが初期値ですね。例えば 見出し を意味する <hx> (xは1〜6の数字) は勝手に太くなりますし、1〜6の段階に応じて文字の大きさも勝手に変わります。それが初期値。pタグも当然初期値を持ってます。

これが初期値、つまりデフォルト。テキストの一定範囲を <p>〜</p> で囲うと、上下に空白ができます。それが正しいというか、各ベンダーは親切にもそうした初期値を設定しています。
* vener (べんだー) = 販売元, リリース元

親切なんですよ？ (´・ω・｀)
だって英語的には段落間に空白を設けるルールなわけだから。

親切は時におせっかい【リセットCSS】

リセットCSS というのを耳にしたことが有る方も多いかと思います。htmlタグの初期値というのは各ベンダーが独自につけていることも多いんですね。するとそのまま利用した際に ブラウザ間で見た目の格差ができてしまう ことになります。クロスブラウザ問題 (´・ω・｀)
ブラウザ毎に見た目が違うなんてのは望ましくないですし、コントロールが難しくなりますので、

ってするのがリセットCSSです。特徴的なCSSは一旦全て無かったことにしてしまうという、ある意味荒業ですが、フツーに行われていることです。CSSはあくまでもスタイリングの分野であって、htmlの意味や定義を変えてしまうといったことはありません。

ブラウザ間格差を無くすことも目的の一つですが、最近って色んなCSSスタイリングが出回っていてですね、例えば見出しひとつにしても色々な装飾がありますよね。で、大抵は「コピペでOK！」みたいな感じ。そうなると、CSSの初期値をご存知ない方がサイトなんかで調べてそのままベタ貼りしてしまうわけなんです。

pタグなんてのは比較的よく利用されるhtmlタグですし、実際pタグを用いた特殊なスタイリングを紹介しているページもたくさん存在します。そうなるとやはりpタグの初期値が 邪魔 になってしまうんです。例えばCSSだけでリボンを描画しようと思ったとして。
「なんか… サイトに書いてあった通りのCSSソースなのに、リボン幅がめちゃめちゃ広い 何故だ…」
とかさ (´・ω・｀)
初期値が親切どころかおせっかいになってしまうパターンです。

pタグに限定して言うと、それだけじゃないんですね。エディターによっては改行するたびにpタグで囲まれる ことがあります。Amebaのエディターなんかがそうです。FC2ブログのエディター(新投稿画面)はpでなくdivです。

ほとんどの方が改行を間違っている

これもうホント何度も同じこと書いて申し訳ないのですが。

改行は Enter/ Return キーじゃなくて Shift + Enter/ Return キーですぜ旦那！

Enter/ Return単一キー押下は 改行ではなく改段落 なんです。この事実をご存知の方がものすごく少ない。だからみなさんが「改行(だと思いこんで)」する時はEnter/ Returnキー (以下「改行もどき」と称す)なんですね。で、こういう時にみなさん改行もどきを行います。

例)
こんにちは。
今日は良い天気ですね！
気持ちの良い一日が過ごせそうです ＼(^o^)／

図解するとこんな ↓

感覚的にはhtmlはこうなってると思ってる(しかし思い込み) ↓

こんにちは。<br>
今日は良い天気ですね！<br>
気持ちの良い一日が過ごせそうです ＼(^o^)／<br>

ところが本人が「改行した」と思い込んでいるだけで 改行もどき = 改段落 ですので、実際のhtmlはこうです ↓

<p>こんにちは。</p>
<p>今日は良い天気ですね！</p>
<p>気持ちの良い一日が過ごせそうです ＼(^o^)／</p>

みなさんは自らこの形にしているんです。これはエディターのせいではなくて、改段落と改行を間違えているユーザーの自己責任だねぇ (´・ω・｀)
でもって、pタグにリセットがかかってないと初期値適用ですからこうなる ↓

なんか勝手に行間空いとるな、と (´・ω・｀)
でも勝手に空いたわけではございません。改段落を行ってわざわざ空けたんです。ユーザーが自分で。

改行と改段落

【改行】というのはこういうのですよね ↓

例)

全部横並びで
あいうえおかきくけこさしすせそ
と書いてあると非常に読みづらいです。だから可読性を重視する意味で任意改行を行うことがあります。

【改段落】というのは 物事や意味の切れ目 に入れるものです。

例)

全部で3段落。
この段落の中にはもちろん【改行】も含まれています。

日本語ってね、やっぱ英文とは随分違うんですよね (´・ω・｀)
英語というのは

こうなんです。ピリオドが入ったからといって改行したりは基本的に しません。日本語ってどうなんでしょう。正しいGrammarがわからない （￣∀￣；）
だって基本、縦書き文化じゃん。

連続brタグの利用の是非

Grammar的な観点から言えばやっぱり NO ってことになるんでしょうか (´・ω・｀)
ホントにね、英語論文を書いたことがある方はよくご存知かと思うんですが、段落間には空白だとか、斜体の使い所とかも細かく指示されるわけなんです。で、文章と文章の間に1行分以上の空白が有った場合、そりゃ段落間空白だろ？ とみなされるわけなんですよ。
そもそもがそうなんです。

連続で <br> を入れるということは最低でも1行分は空白ができるわけで、1行以上の空白は「段落の切れ目」だろう、と。こういう理屈よね (´・ω・｀)
ですから「何故連続brがアカンのや！」という回答をちょっと視点を変えてみると、それはGrammarなんです。たぶん(笑)
そしてそれが段落間空白行であるならば、即ち <br> じゃなくて <p> だろ、と。

是非はね、是非は… 正直よくわからん。私も連続brなんて多用してますし。厳密に言って連続は良くない、と言われれば納得はできます。修正しないけど(笑)

何故FC2ブログはpでなくdiv なのか

改行と思い込んだ改段落を行った時、Amebaブログでは <p> で挟まれます。ですがFC2では <div> です。この理由について推測。

これまで記した通り、pタグというのは特徴的なCSS初期値を持ってます。でもそれを知っている人が少ないわけ。さらに正しい改行の仕方を知ってる方も少ないというコンボ。

で、運営というのは CSSの初期値リセットはなるべく避けたい んじゃないかと思うんですよね。親切が翻って余計なお世話、ってのも書きましたが、仮にpタグの習性を良く知っており、グラマティカルに規則正しくhtmlを利用したい人が
「なんでp使ったのに段落間に空白ができないんだ！おかしいじゃないか！」
ってなる可能性だってあるんです。

その場合はリセットの方が大きなお世話なわけで。やっぱり正しく理解している人が正しく使える、というのが理想ですよね。例え寧ろ間違っているのがマジョリティだったとしても。そしてCSS初期値に変更を加えるなんてのはひとつ責任を増やすことにもなると思うんだ(笑)
そういうことは避けたいはず (´・ω・｀)

改段落がpで挟まれるのはhtml構文的にも正しいのだけれど、改行キーの勘違いのせいで多くの方が初期値のままpタグを使うことになると、これはもう大きなクレームになることは目に見えてます。そこでpと同じdisplay初期値がblockであり、どのブラウザでもmarginのつかない汎用的に使えるタグ <div> を選択。ってことじゃないかなぁ (´・ω・｀)

Amebaは一旦 p から div へのプログラム差し替えを行っていたようです。が結局「html的にも正しいんで…。」という説明を添えつつ p に差し戻してます。marginのリセットを設けた上でpで挟んでる。初期値を消したくない気持ちと、html構文を守りたい気持ち。でまぁ、後者を優先した、と。大変ですね(笑) ← 超ひとごと

FC2の div は柔軟だと思います。FC2はAmebaと違ってレイアウトの統率をしていないので、divを選んで正解だと思います。テンプレートによってはpタグにリセットかけてないものだってあるはずなので。

まとめ

え？特に無い (´・ω・｀) ←←←