段落と区切り

Updated / Published

一般的に文章は、いくつかの段落(Paragraph)から形成されています。段落とは、ひとつの文章の内容的なまとまりを示す単位であり、この文章のまとまりの集合体がひとつの文書として構成されます。

さて、Word や一太郎などのワープロソフトで文書を作成する際の段落とは連続した改行で表現します。また、一般的に日本語の文章作法では、改行や字下げで段落を表現します。このように改行が段落を作るための習慣となっているためか、HTML で文書を作成する場合にも改行を続けることで段落のように表現してしまう用いられ方は後を絶ちません。しかし、この作法はHTML文書における段落を示すのには正しくありません。

まず、HTML において改行を指定するための br要素は、段落の表示の途中で制作者が強制的に改行を入れる必要があると意図的に判断した場合に指定すべき区切りでしかありません。HTML における、段落(Paragraph)を示す要素は、p要素であって、それ以外にはありません。このように HTML文書、つまりはWWW上に公開されたウェブページが正しい情報表現を行えるようにするためには、他のソフトウェアなどで通例・慣例となっている文章作法を用いるのではなく、 HTML の各要素がもつ意味に沿って正しいマークアップを行う必要があります。

段落(Paragraph)の定義

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

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

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

left
要素内のインライン内容を左揃えに表示する
right
要素内のインライン内容を右揃えに表示する
center
要素内のインライン内容を中央揃えに表示する
justify
要素内の文字を均等に配置し、テキストを両端揃えで表示する

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

*p要素の 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属性は非推奨属性です。

関連情報

インライン(行)内容のグループ化

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

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

関連情報

中央寄せ(センタリング)

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

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

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

関連

強制改行の設定

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

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

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

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

登場要素の詳解

水平線(区切り線)とそのオプション

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

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

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

区切り線の太さを指定

<hr size="15">

hr要素の size属性は、水平線のサイズ(線の太さ)を指定する属性です。属性値はピクセル数で解釈されます。指定がない場合は、UA の既定値で表示されます。UA の種類やバージョンによって異なりますが、デフォルトは 1ピクセルから2ピクセルの太さです。size属性は非推奨属性のため、CSS の heightプロパティで代替指定することが推奨されています。

区切り線の幅を指定

<hr width="90%">

hr要素の width属性は、水平線の横幅を指定する属性です。値は整数(ピクセル数で解釈)か、表示域の横幅に対するパーセンテージ値(%)で指定します。width属性の指定がない場合、初期値の "100%" で表示されます。width属性は非推奨属性のため、CSS の widthプロパティで代替指定することが推奨されています。

区切り線の表示位置を指定

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

hr要素の align属性は、width属性で水平線の横幅が指定された場合に表示域内における水平線の水平方向(左右方向)の揃え方を指定する属性です。align属性を指定しない場合、"center" が初期値になっています。値には次の3つのキーワードがあります。

left
表示域に対して区切り線を左揃えに表示する
right
表示域に対して区切り線を右揃えに表示する
center
表示域に対して区切り線を中央揃えに表示する

また、サイズ指定がない場合、揃え方を指定しても、デフォルトは水平線のサイズが "100%" で表示域の左右いっぱいまでの範囲を占めるため、UA の表示に変化はありません。align属性は非推奨属性のため、CSS の marginプロパティで代替指定することが推奨されています。

区切り線の影を消す

<hr noshade>

hr要素の noshade属性は、区切り線を「影なし」で表示させる属性です。通常、hr要素の水平線は陰影のある立体的な表示になっています。これをあえて平面的な一本のラインに表現するのが noshade属性です。属性値はありません。

区切り線の色を指定

<hr color="#00FFFF">

body要素の bgcolor属性と同じで RGB値、またはカラーネームで水平線(罫線)の色を指定します。color属性によって色を指定すると水平線は noshade属性を指定した場合と同じように平面的な表示になります。hr要素の color属性は、Internet Explorer が独自に採用したブラウザ独自の機能ですがどのブラウザも対応しています。CSSではcolorプロパティで代替することもできます。

*size属性, width属性, align属性, noshade属性は非推奨属性です。color属性はブラウザの独自機能です。

登場要素の詳解