まとめpタグとは?pタグは“1つの段落”を意味するHTMLタグで、<p>と</p>で囲まれた範囲が段落要素となります。段落は英語で“Paragraph”といい、この頭文字の’P’がタグの名称となっています。HTMLで構築されるWebページにおいて、文章は内容を構成する要素の基本となるので、pタグは使用する機会が非常に多いHTMLタグです。(使用頻度が1番多いHTMLタグかもしれません)WordPressや、はてなブログのようなブログサービスでも、記事の本文は通常、pタグでマークアップされます。pタグはHTMLの学習で最初に覚えるべき基本のタグです。pタグの正しい使い方をマスターしましょう。pタグは決して“改行をするためのタグ”ではないpタグについての説明するWebページ、または「HTMLの改行の仕方」のように改行方法を紹介するWebページで「pタグを使うと改行できる」という紹介を時々見かけます。pタグはあくまで“1つの段落を表す”ためのタグなので、「改行はpタグで行う」とは絶対に覚えないでください。pタグでマークアップすることで、その文章が1つの段落となり、段落ごとに文章が区切られるために改行を伴うということです。改行したいが為に段落内の文章の途中で無理やりpタグを閉じては不自然な意味の文章になってしまいます。文章の途中で改行したい場合は、pタグではなくbrタグを使いましょう。文章の“段落”と“改行”の違い“段落”と“改行”の違いはしっかり覚えておきましょう。文章内で新しい行をつくること(つまり行を変えるということ)段落は文章全体の中から内容で区切ることで、同じ内容の文章を1つのまとまりにします。異なる内容の段落との間では改行が発生するわけです。改行は“意図的”に新しい行をつくることを言います。段落内で行を変えたい場合には改行を使用するということです。WordなどでのEnterキーによる操作は改行ではなく、新しい段落をつくる操作になります。純粋な改行はShiftキーとEnterキーを同時に押します。Enterキーpタグの使い方・記述方法pタグによるマークアップは、ほかの多くのHTMLタグと同じく以下のように<p>と</p>で囲むように記述します。HTML<p>ここに本文のテキストを書きます</p>表示結果ここに本文のテキストを書きますpタグの表示結果は、基本的には何の装飾もない通常のテキストとなります。一般にWebブラウザの持つpタグのデフォルトスタイルでは、線や文字の太さなどの装飾はありませんが、上下にmarginによる余白が指定されています。Webブラウザで見た場合に段落間で余白があるわけです。ここで注意してほしい点は「段落間でもっと広い余白が欲しい」という理由で以下のように空のpタグを連続して使うということはやめましょう。HTML<p>ここに本文のテキストを書きます</p><p></p><p></p><p></p><p>ここに本文のテキストを書きます</p>この方法では“見た目上”は広い余白を作ることができますが、検索エンジンから見たら内容の無い空の段落がいくつも並んでいると認識されてしまいます。見た目上の理由で余白が欲しい場合はCSSで設定をしましょう。「Webのいろは」では、本文中のpタグには以下のように余白を指定しています。2em;}2emの“em”とはCSSで使用される単位の1種で、文字の高さ分を“1em”としてサイズを考える単位です。下に2文字分の高さの余白を指定しているということです。pタグごとに余白を変えたい場合はどうすればいいか?先程の例は、全部のpタグの下に2em分の余白がつきますが、段落ごとに余白の大きさを変えたいという場合はCSSのクラスを使って余白を調整しましょう。何種類かの余白用のCSSクラスを作っておき、使う場面に応じて使い分けます。.8em;}この様に作っておけば、元々pタグに指定されるスタイルと合わせて5種類の余白を使い分けれます。使い方は以下のようにHTMLタグにCSSクラスを追加するだけです。class="small-space">ここに本文のテキストを書きます</p>pタグのalign属性についてHTML4では、pタグはalign属性という文字揃えを指定する属性が指定可能でしたが、この属性はHTML4当時から非推奨でした。HTML5になり、align属性自体が無くなったので、現在の使用は推奨できません。文字揃えについてもCSSで指定するようにしましょう。CSSのtext-alignプロパティで文字揃えを簡単に指定することが可能です。text-align:right;}表示結果このテキストは右揃えになります。テキストが右揃えになりましたね!左揃え用や中央揃え用のCSSクラスを用意しておき、CSSで文字揃えを制御できると便利です。pタグの他に適切なHTMLタグが無いかも考えるWebページ内の本文はの基本は、pタグでマークアップする段落となりますが、他に適したHTMLタグがある場合はそちらのタグを使用します。箇条書きを表す場合は、pタグと改行のbrタグで表すのではなく、ul、liタグ(またはol、liタグ)を使いましょう。・リスト項目ul、liタグを使ったリストリスト項目リスト項目リスト項目Webブラウザでの“見た目上”はほとんど同じ箇条書きですがマークアップの意味は全く異なるので、当然、検索エンジンには正しく伝わりません。他にも、見出しではhタグを使用し、他のWebサイトから引用したコンテンツはblockquoteタグなどを使用しマークアップしましょう。ほかのタグについては、下記をご覧ください。Webページでの引用の使い方・表記方法HTML5では各HTMLタグの意味もより明快になっていますHTML4では、適当な意味を持つタグがないためdivタグやpタグがよく使われていましたが、HTML5に変わり様々なタグが新たに登場しました。以下の一例を紹介します。smallタグ使う場面は様々なので一概には言えませんが、上記のタグの内側(タグによっては外側)でpタグを組み合わせて使うと、色々な意味をより正確に表現することが可能になると思います。