W3G

段落（Paragraph）の定義

<p>この部分がひとつの段落となる。</p>
<p align="center">段落内のテキストを中央揃えにする。</p>

p要素は、段落（Paragraph）を定義するブロックレベル要素です。開始タグの "<p>" と終了タグの "</p>" に挟まれた内容がひとつの段落になります。視覚ブラウザでは、表示域の左右いっぱいまでの範囲を占め、前後に改行を置き、上下に１行分の余白をあけて表示されます。p要素は段落を示すため、p要素の中にブロックレベル要素を含めたり、p要素を入れ子にすることはできません。p要素が内包できるのは、インライン要素とテキストのみです。

また、p要素内の画像やテキストなどのインライン内容の水平方向（左右方向）の揃え方を指定する場合には、align属性で指定します。指定できる値には次の4種類のキーワードがあります。

left

要素内のインライン内容を左揃えに表示する

right

要素内のインライン内容を右揃えに表示する

center

要素内のインライン内容を中央揃えに表示する

justify

要素内の文字を均等に配置し、テキストを両端揃えで表示する

align属性を指定するのはテキストの位置揃えを変更することができるの知ってもらうためであって、HTML本来の目的としては悪いお手本であることを理解しておいてください。そして代替としてCSSを使うことが推奨されているわけですが、まとめて後述します。

*p要素の align属性は非推奨属性です。

関連内容

• p要素
• text-alignプロパティ

ブロックレベル要素のグループ化

<div>
<p>段落。</p><p>段落。</p>
</div>
<div align="center">内容を中央揃えにする。</div>

div要素は、ひとつのまとまりを定義します。段落を示す p要素に対して、div要素は、要素をグループ化してまとまりを示す役割をします。div要素の中にはブロックレベル要素を含めたり、div要素を入れ子にすることもできます。視覚ブラウザでは、p要素のような上下に1行分の余白はありませんが、表示域の左右いっぱいまでの範囲を占め、前後に改行を置いた表示になります。

p要素と同じように水平方向（左右方向）の揃え方は align属性で指定します。p要素と違うのは、ブロックレベル要素も内包できる点で、div要素は特別で、テキストやインライン要素などのインライン内容だけでなく、横幅の指定されたブロックレベル要素にまで左右揃えの表示が反映されます。値には、次の4種類のキーワードを指定できます。

left

要素内の内容を左揃えに表示する

right

要素内の内容を右揃えに表示する

center

要素内の内容を中央揃え（センタリング）に表示する

justify

要素内の文字を均等に配置し、テキストを両端揃えで表示する

div要素単体ではalign属性で内容の水平方向の揃え方を指定する見栄えの調節ぐらいの用途しかありませんが、まとめてlang属性で言語情報や dir属性で書字方向に関する設定をしたり、id属性や class属性を割り振って構造化したものに対し、CSSでのスタイリングやJavaScriptでのスクリプティングなどを効果的に併用できるのが、div要素本来の機能です。これについてはまだ実感が湧いてこないと思われますが、div要素は表示位置の揃え方を指定するためのものではなく、使い方次第で文書の情報的価値を高める要素であると理解しておいてください。

*div要素の align属性は非推奨属性です。

関連情報

• div要素
• ブロックレベル要素
• text-alignプロパティ
• marginプロパティ

インライン（行）内容のグループ化

<span>インライン内容のまとまりを定義</span>

span要素も div要素と同じひとつのまとまりを定義します。div要素がブロックレベルでの範囲を示すの対して、span要素はインライン（行内）レベルでの範囲のまとまりを示します。div要素同様、span要素も単体で使用することはなく、CSS と組みあわせることで有効的にスタイルを適用できます。

関連情報

• span要素
• インライン要素

中央寄せ（センタリング）

<center>内容はすべて表示域の中央に寄せて表示される</center>

center要素は、画像やテキストなどのインライン内容（行内容）と横幅の指定されたブロックレベル要素を表示域内でセンタリング表示させます。center要素の代わりに、インライン内容は "<p align="center">...</p>"、横幅の指定されたブロックレベル要素は "<div align="center">...</div>" を指定することで同じ表示になりますが、HTML4 の仕様では段落やまとまりの属性の水平方向の揃え方を指定する align属性や center要素などの視覚的体裁をコントロールするための要素や属性は、いずれも推奨されない手法となっています。

そこで、これらの指定に代って CSS を使うことが推奨されています。CSS では画像やテキストなどのインライン内容の水平（左右）方向の揃え方には text-alignプロパティを使い、横幅の指定されたブロックレベル要素の水平（左右）方向の揃え方には marginプロパティを使います。ここではCSSについては詳しく触れませんので、先に具体的な代替方法を知りたい方はCSS によるブロックレベル要素の左右中央揃えを参照ください。

関連

• center要素

強制改行の設定

ソース内で文章が続いても表示域に合わせた折り返ししか行われません。
<br>を使うことで強制的に改行を指定することができます。

br要素は、テキストや画像などのインライン内容（行内容）を強制的に区切ります。br要素にはこれまで紹介してきた要素にはあった終了タグがありません。br要素ように終了タグがなく、内容を持たない要素のことを空要素と呼びます。

HTML 文書内で改行を行っても、それは折り返しであって、HTMLにおける改行の意味とは異なるため UA には改行が反映されることはありません。UA に改行であることを解釈させるには br要素を使います。たとえば、テキストは表示域にあわせて行内容が満たされると自動的に折り返して表示されます。この文書のテキストも表示域のサイズを大きくしたり、小さくすると、それに合わせ自動的に行内容が満たされたところでテキストの折り返しが行われます。これに対して br要素は、テキストが行内容を満たして折り返しが行われる前に強制的に改行を指定することができます。

また、br要素に clear属性を加えることによって、画像の横に回り込ませたテキストの回り込みを途中で解除することができます（clear属性は非推奨属性のため、回り込みの解除には CSS の clearプロパティで代替指定することが推奨されています）。

登場要素の詳解

• br要素

水平線（区切り線）とそのオプション

<p>ひとつめの話題終了</p>
<hr>
<p>次の話題がはじまる</p>

hr要素は水平線（罫線）を表示するブロックレベル要素ですが、ひとつの文書内で段落が連続している場合に、段落の前後で話題をわけていることを明示するために使用でき、区切り線が表示されます。hr要素はbr要素同様、終了タグがない、内容を持たない空要素です。hr要素は表示域の左右いっぱいまでの範囲を占めるため、hr要素の横にテキストや他の要素を続けて並べたり、hr要素を2つ続けて指定しても横に2つ並べて水平線を表示することはできません。

また、hr要素は、太さや幅などの様々なオプションを属性として指定することができます。

<hr size="15">

<hr width="90%">

<hr width="300" align="left">

<hr noshade>

<hr color="#00FFFF">