段落(pタグ)の使い方
ウエブページの文章だけのコンテンツ内では、ページのタイトル(h1タグ)と見出し(h2~h6タグ)と段落(pタグ)だけの最小単位で構成できます。これを適切に使うことで、検索クローラーにも適切にタグを認識させることができます。段落を上手に使いましょう。
ウエブページのコンテンツ内の構成
ウエブページ(Web page)の コンテンツ楽天 内 でテキスト文字だけに限ると、一般的に、最小限の構成としてはページのタイトルと見出しと段落で構成されています。実際はこれに、リストや表や画像など、様々なタグを使ってコンテンツを作ることになります。
最近のブログなどを見ると、ページのタイトルとタグの無い文章だけでコンテンツを作る人もあるようです。しかし、読みやすい文章を作る場合や、検索ロボット(クローラー)にも適切にタグを認識できるページを作る為には、ページのタイトル(h1タグ)と大中小の見出し(h2~h6タグ)と段落(pタグ)などを適切に使うことが大切です。
段落とは
最近のブログを見ていると、段落が全く無い、延々と改行もされない文章がよくあります。また、反対に、文脈の途中で切れ切れの、改行だらけの文章もよく見られます。これらの文章は読みにくいので、読む意欲をそがれてしまいます。
そんな文章を見ると、どこが文脈の節目(内容の切れ目)なのかを判断するのに苦労させられます。詩などの特殊な表現のものならそれでも良いでしょうが、日記や論文や随筆などでは幾つかの文で構成された、話題の区切りや場面などの転換点が必ずあります。この同じ内容のひと塊の文章が1つの段落となります。
この段落をウエブページでは、pタグを使って書きます。つまり、同じ内容の文章の塊を1つのpタグの中に入れるということです。pタグを使わないと、検索クローラーは段落を認識できません。
本や新聞などとウエブページの段落の比較
本や新聞などを見ると、段落では、文頭で必ず1字分の字下げをしてあります。これは、見ただけで段落の始まりだとわかるからです。これは、ウエブページにおいても同様だと思います。字下げしてある方が読みやすいのは印刷物もネット上の文章も変わりがありません。
段落と段落の間のスペースについては、本や新聞などでは、1ページの行数などの関係で、特に行間を空けていないようですが、ウエブページでは、1ページの行数は問題にならないので、少し広めに行間を空けた方が私は見やすいと思っています。
pタグや改行の悪い使い方
よく、段落の切れ目で行間を広くとる為に、更に改行を入れる人がありますが、これは、後述するようにCSSで調整すべきでしょう。改行は整形の為に使うものではありません。
改行の多いページをスマートフォンで見ると、読みにくい上に、延々と下へのスクロールが必要となり、とても操作性の悪いページとなりますので気をつけましょう。
pタグを使うと最後に改行されるので、次のようなコードで、改行の代わりにpタグを使う人があります。これは、本来の使い方ではないのでやめましょう。
<p> </p>
pタグのCSS設定例
次のスタイルシート(CSS)は、私の場合の例ですが、読みやすいように、段落の前後の行間を少し広くとっています。また、1文字分の字下げ(インデント)をしています。
p {margin:2px 5px 8px;text-indent:1em}
私はddタグ(定義の説明タグ)についてもpタグと同様な設定をしています。
段落の細かい使い方
「」で始まる場合の文頭は、印刷関係では字下げしないことになっていますが、ウエブページではCSSで規定していると、いちいち変更は簡単にできないので、字下げしても構わないと思います。
「」を閉じる直前に句点「。」は置かない事になっています。つまり、「今日、学校へ行った。」とは書かないで、「今日、学校へ行った」と書くということになっています。ウエブページの場合、そんな細かいことはどうでも良く、実際はどっちでも良いでしょう。