文章を書く 【<p>タグ】：HTML入門
HTML入門（4）
記事「見出しを付ける 【<h>タグ】」にて、見出しの付け方が分かりました。
そうしたらもう、今回は、文章を書くしかないのであります。「ピーピーピーですよ。（長渕）」
お話は、次の順番で進みます。
段落タグ（<p>タグ）とは？
<p>タグは、ひとつの段落を指定するためのタグです。
次のように記述します。
<p>〜</p>
つまり、文章のひと段落を、<p>〜</p>で囲めば良いわけです。
ちなみに、どうして、「p」かと言えば、「Paragraph（段落）」の頭文字「p」です。
本にたとえてイメージする
それでは、本を手に取って、開いてみてください。
見出しがあって、文章が続いていると思います。今回は、この文章のお話です。
それでは、梅田さんの本『ウェブ時代 5つの定理』の「まえがき」の冒頭を引用させていただいて説明することにします。（以下、引用です）
未来を見通すことなど誰にもできないが、こうすればクリアに想像できるのか。世界の成り立ちなど誰にもわからないけれど、こうすれば見晴らしがよくなるのか。
この文章は、2つ段落があるので、HTMLコードでは、次のように記述します。（画面上で見難い場合は、テキストエディタに貼り付けて見てくださいね）
それぞれの段落を、<p>〜</p>で囲むわけです。
<p>タグを使うだけで、次のメリットがあります。便利ですよ。
- 自動的に、改行される。
- 自動的に、段落と段落の間に適度なスペースができる。
などなど。
ひと様の文章を引用する場合は、また別途、引用タグというものが存在します。ここでは、仮に〜というお話です。
実習 <p>タグ
1：<p>タグを使ってみる
それでは、次の文章を、<p>タグで区切って、HTML文にしてみましょう。（好きな文章を使って構いませんよ）
むかし、むかし、あるところに、おじいさんと、おばあさんが住んでいました。おじいさんは、山へ柴咲コウとピクニック。おばあさんは、川へ千と千尋の神隠し。おばあさんが、川で「ハクはそんなことしっこない！優しい人だもん！」と叫んでいるうちに、川の向こうから、どんぶらこっこ、どんぶらこっこと桃が川下へ流れて行ってしまいました。お終い。
出来上がったら、以下のHTML文に組み込んで、ブラウザで表示してみてください。
ブラウザで表示すると、次のようになります。
ブラウザで表示させる方法は、記事「HTMLを表示させてみよう」が参考になります。
2：遊ぶ
時間に余裕がある人は、好きなように文章を作って、遊んでみましょう。覚えようとするよりも、慣れることが大切です。
<p>タグの必要性
1：<p>タグなんているの？
とても熱心に読んでくれている人は、「ん？<p>タグなんているの？」と、疑問に感じていらっしゃるのではないでしょうか。
たしかに、記事「HTML文を表示させてみよう」でも、次のように HTML文を書きました。
「文章が、書けているではないか！おのれ〜、わたしを愚弄する気か！成敗してくれる！」などと怒ってはいけません。
これは、単に HTML文が融通の利く言語であり、またブラウザも多少のミスは目をつぶって表示してくれるためです。
絶対にダメということでもないのですが、世の中は、「Web標準」の方向へむかっているので、好まれない書き方と言えます。
「それでは、嘘をついていたのか！おのれ〜、わたしを謀（たばか）りよったな！成敗してくれる！」などと怒ってはいけません。
説明には、段階というものがあるのです。
2：<p>タグのメリット
「それにしたって、わざわざ <p>タグなんて書くの面倒くさいよ、いらなくね？くねくね？」と感じるかもしれません。
しかし、<p>タグを使えば、次のようなバラ色の世界が待っているのです。
- インデントさせることができる。
- 行間を、指定できる。
- 文字間隔を、指定できる。
などなど。
これらは、CSSによって行います。タグで囲んでいるからこそ、CSSの効果を付けることができるのです。
そして、ボーナスポイントとして、SEOの効果もあると言われています。繰り返して申し上げます。
「タグで囲んでいるからこそです」
まだ、CSSの話をしていないので、納得しかねるかもしれませんが、<p>タグを使う方が、圧倒的にメリットがあることは、Web制作について学べば学ぶほど理解できるものと思います。
次回予告
次回は、画像を使うための<img>タグについて書きます。
関連記事
HTMLに関連する記事を、ご紹介します。
1：カスタマイズ前
2：HTML入門
- HTML入門 はじめました
- HTMLを表示させてみよう
- 見出しを付ける 【<h>タグ】
- 文章を書く 【<p>タグ】（この記事です）
- 画像を使う 【<img>タグ】
- リンクさせる 【<a>タグ】
- 表を作る 【<table>タグ】
- 箇条書き 【<ul>タグ】
- グループ化 【<div>タグ】
- HTML入門まとめ
3：もう少しHTML
作成日：2008/03/18 更新日：2008/03/18
« 「見出しを付ける 【<h>タグ】」｜「画像を使う 【<img>タグ】」 »
コメントありがとうございます。
くねくね？
SEO効果
直接的なSEO効果は少ないと思います。
ただ、pタグを使わない場合のことを考えると、
自ずと軍配は、はっきりとしそうです。
例えば、行間を空ける場合、pタグを使わないとすると、
brタグを使うことになると思うのだけれど、
brタグを5個も6個も入れるようなソースコードは、
美しくないです。
また、Web標準で推奨されないfontタグも、
使わざるを得ない状況も発生しそうです。
pタグを使えば、CSSで操作しやすくなるから、
何しろ、きれいなコードが書けます。
ゆえに検索エンジンの覚えは良くなると思うんだ。
おっ、ブクマボタン付けたんですか。
しかし、おもしろいサービスを考えつくものですよね。
アイディアが、すごいなぁって思うんだ。
スッキリ
文字の大きさ、色、また行間とかも。
htmlに直接それらを指定してもいいけど、やはりゴチャゴチャするのは
避けられないですね。
なるほどなるほど
やっぱりロボも人も見やすいのが一番ですね。
ブクマつけてみました。
でも、どうもページの表示が遅くなってしまって。
とっちゃうかもorz
はてぶは登録してみたので、これからたくさん利用したいと思ってます！
こんばんは！
最後まで読んでまたトップに戻ってから気がつきました！
長淵のピーピーピーは＜ｐ＞タグにかけてたんですね（笑）＾＾
つい改行してすましてしまう癖があるんですが、＜ｐ＞タグを使えば
ＳＥＯ効果に繋がるんですね。なるほど！
とても参考になります。
次回の「imgタグについて」楽しみにしています＾＾
やすきよ
「SEOの効果の小さいことなどに、こだわってられんわ！」
という人もいらっしゃるようですが、
内部的なSEOは、
小さなことの積み重ねで組み立てられていると思うんだ。
やっておいて損はしないと思う。
それに、コードが簡潔になれば、サイトの表示も速くなります。
また、ひとりで作っているうちはいいけれど、
チームで作ったり、コードを再利用することを考えると、
ごちゃごちゃしていない方が良い。
いいことばかりなんだなぁ。(・∀・)
ただ、言うはやすしきよし、行なうは難しなんですよね。
完全にHTMLとCSSで分けて出来ているかというと、まだまだッス。
「小さなことからコツコツとー」です。
AddClipsは、何ででしょうね。
確かに表示動作が不安定な感じになっています。
不思議だ。
あれ？今日はそうでもないかな。
ちょっとemoのデータ待ちが長いみたいだけれども、
何でしょうねぇ？？？(´Д｀;)
ぴーぴーぴー
そ、そうです。(〃▽〃)てへっ
「あれ？文章のタグって何だったかしら？」と忘れてしまったときに、
長渕剛さんの「ぴーぴーぴー」がどこからともなく聴こえてきて、
思い出せるんじゃないかと考えて書いておきました。
記憶への道（シナプス？）は、
何本かあった方が良いと思うんだ。(・∀・)
改行タグは、強制改行と考えた方が良いかもしれません。
（どうしても、ここで改行せざるを得ない場合にだけ使う）
次回imgタグは、すんごい長くなるかも・・・。(´Д｀)
コメントの投稿
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/243-61175a58
Pタグ、昔は使わなくていいやんと思い、まさに文中の「くねくね？」だったのですが、
最近やっとその大切さがわかってきました。
しかもSEO効果に繋がるなんて！しらなんだ！
hタグや、キーワードだけではなく、いろいろなSEOの方法があるんですね。
前の記事のブクマボタンの設置を読んで、とてもおもしろそう！と思ったので
自分のブログにも設置してみました！
ありがとうございました＾＾