[HTML] Pタグの特殊性

お前、HTMLも知らんの？ 今時のIT会社に勤めている人だったら、HTMLぐらい嗜んでおかないと、今後仕事無くなっちゃうよ・・・ なんて厳し目の事をいう人もいるとかいないとか・・・（知らんけど） 他人の事にはあまり興味はないけど、一緒に仕事をするHTMLコーダーのレベルが低かったら、同じセリフを言っちゃいそうになります。 先日、とあるWEBサービスを開発しているチームにJOINさせてもらって、一緒に仕事をしていた時に、 HTMLに違和感を感じてこっそりと修正してあげたんですが、それが、Pタグの中にいろいろなHTMLタグを書き込むという、 DIVタグの様にPタグを使っているHTMLコードを見てしまったんですよ。 「同じブロック要素だから、同じでしょ？」と思った人は、HTMLの学習が足りていません。 今回のブログを読んで、Pタグを熟知しましょう。

Pタグについての基礎知識

Pタグは、「paragraph」（段落）の意味で、主に文章のタグとして使われます。 上下にマージンを取る事で、CSSでは、Pタグのマージンをまずは0にリセットして使うことがほとんどですが、 本来は文章用の段落ごとのタグで、WordpressやWIZYWIG系のブログシステムなどでは、改行ごとにpタグがセットされるような使い方がされています。

Pタグはブロック要素だけど内包タグに要注意

Pタグはブロック要素です。 でも、DIVタグと同じ様に使えるブロック要素ではないという点を知らないと、事故ります。 Pタグは、その中に書き込めるのは、インライン要素だけなんです。 そもそも、Aタグのようなインライン要素は、内部にブロック要素を書かないというルールは知っている人は多いと思いますが、 それと少し似ているブロック要素で、ブロック要素が中にかけないのが、このPタグなんです。 何故かっていうと、それは、これが文章系のタグだからです。 CSSでどのタグでもインラインとブロックを自由に切り替えられる様になり、 TABLEを、ブロック要素に変換したり、自在にFLEX-BOXなどを作って、自在にホームページ装飾をコントロールできるようになってきましたが、 Pタグは、ブロック要素を中に入れ込んではいけないタグなんです。

Pタグ大人気の秘密

でも、何でみんなPタグを使いたがるんでしょう？ 制約がないDIVタグとSPANタグ飲みを使って、安全な構成にした方が、運用効率も、安定性もアップするのに・・・ そんな疑問を考えていると、もう一つよく使われているタグを見つけちゃいました。 それは、iタグです。 よく使われているというと語弊がありますが、ライブラリなどで使われがちなタグと言った方が正確かもしれません。 あと、誰も何も疑わずに頻繁に使うタグとして、Aタグがありますよね。 リンクを設置するのに必須です。 でも、Javascriptでクリック操作をしてもいいのですが、手軽で簡単なAタグを使う方が圧倒的に多いはずです。 もちろん、JSが苦手というプログラミング嫌いのコーダーさんも多いこともうなづけますが、 Pタグ、Iタグ、Aタグ、これらに共通するのは、タグ名が1文字タグという点じゃないでしょうか？ 厳密にいうと、Aタグは1文字タグだけど、Pタグは1文字タグではないんですよ・・・これはHTMLの歴史に関することなので、別の機会に説明したいと思います。 そして、他にも、Sタグ、Uタグ、Qタグ、Bタグ・・・と、1文字で書くタグは、いくつか存在します。 これらは、手軽で書きやすく、コーディングしても、スッキリして見えるから、好んで使われがちなんじゃないかな〜と個人的に考えています。 プログラマーの変数名をどうつけるかという時に、「短いほど良い」という人のそもそもの美的感覚と似ている様にも思えますね。

あとがき

HTMLのタグって、そのタグそれぞれにキチンとした、意味があり、それを知らないとまあまあ事故るという事を理解しておくと、 ちゃんとタグの意味を学習しておく必要があるということがわかります。 今回の話が面白いと思った人は、XMLの歴史などを深掘りしてみると、もっといろいろな面白タグの話がでてきますよ。