段落の実例です。 左寄せの段落
中央寄せの段落
右寄せの段落
HTML3.0以降では｢均等並び(justify)｣が付加されました。
段落と改行
<p>,<br>
段落
<p>
HTML文書はワープロと異なり、TeXやSGML等と同じく段落や改行の印が明示的に必要です。まず、文書の段落分けを行うには<p>タグを用いますが、この<p>タグの場合、これまでのタグのような開始タグと終了タグはありません。段落の最後に<p>タグを付ければ、そこで段落分けされます。ただし、HTMLレベル３では開始タグと終了タグがあり、その段落テキストの位置(右寄せ、左寄せ、中央寄せ)を指定できるようになりました。
HTML文書では改行を明示的に示さなければならないので、次のような文書を書いても上記の例とまったく同じように表示されます。例で文章の区切りが改行されているのは、ただ編集する際に見やすくするためです。
<title>シンプルなHTML文書の例</title>
<h1>これはレベル１の見出しです</h1>
HTMLの世界へようこそ。これは１番目の段落です。<p>
そして、これは２番目の段落です。<p>
なお、<p>タグは重ねて記述しても、ふつう１回分の効果しか表われません。改行を重ねて行う場合は、ふつう<br>(改行)タグが用いられ、それらを重ねて記述した場合の効果は使用するブラウザ(閲覧ソフト)によって異なります。
<title>シンプルなHTML文書の例</title><h1>これはレベル１
の見出しです</h1>HTMLの世界へようこそ。これは１番目の段落
です。<p>そして、これは２番目の段落です。<p>
モザイクやネットスケープのような<p>を重ねても効果のないブラウザ(閲覧ソフト)でも、<pre>(整形)タグを使用すると<br>同様、改行の重複効果が現われます。
<hr>
<pre>
<p>
<p>
<p>
<p>
<p>
</pre>
<hr>
段落と見出しの左、中央、右寄せ
<p align=left | center | right | justify>
<p>タグでalign属性を使用することによって、左寄せ(leftもしくは使用しない)、中央寄せ(center)、右寄せ(right)が指定できます。
<p align=left>左寄せの段落<p>
<p align=center>中央寄せの段落<p>
<p align=right>右寄せの段落<p>
中央寄せ
<center>〜</center>
<center>〜</center>は、テキストを中央寄せする場合に指定します。<center>タグは前後の文書を改行するだけですが、<p align=center>タグは空行を挿入します。<center>が<p align=center>と同じ効果を得るには、<center>前後に<p>(段落)タグを置いて下さい。
インターネット･エクスプローラ(Microsoft社)では<center>と<p align=center>が同一効果となります。
この段落は左寄せです。この段落は左寄せです。この段落は左寄せです。
<center>
テキスト
</center><p>
<p align=center>
テキスト
</p>
この段落は左寄せです。この段落は左寄せです。この段落は左寄せです。
この段落は中央寄せです。
この段落は左寄せです。この段落は左寄せです。この段落は左寄せです。改行 <br>
HTML文書では改行を明示的に指定しなければなりません。明示的に改行するには<br>タグを用います。この<br>も<p>と同じくワンサイドタグなので、開始タグや終了タグがありません。改行タグは、空行が入る<p>タグと違って、行間へ余分なスペースを入れず強制的に改行し、<br>タグを書いた回数だけ改行されます。たとえば、郵便アドレスなら次のように整形されます。Yasukazu Yokoi
806 2/5 N. Poinsettia Pl.
Hollywood, CA 90046 U.S.A.
テキストの回り込みの解除 <br clear=left | right | both | all>
通常改行を挿入するだけですが、ネットスケープなどの<br>タグでは前にフローティング･イメージ(floating image)がある場合、その後の文書でテキストの回り込みによるマージンをクリアするためclear属性を用います。clear属性には左(left)、右(right)、両方(both)が指定でき、どれを選択するかは画像の位置、つまりフローティング･イメージが指定しているのと同じ方向をクリアすればいいわけです。あるいは、画像の位置がどうあれ、まとめてallを指定することもでき、実質的な機能はbothと変わりません。
@この文書はテキストが右の画像を回り込む形で表示されるよう、Aフローティング･イメージを設定してあります。画像とテキストにはhspaceやvspaceを用いて間隔をあけたほうが見やすくなります。
Bここからは<br clear>タグを使用して回り込みを解除してあります。
改行なし
<nobr>〜</nobr>
<nobr>タグはNo Breakの略で、開始タグと終了タグがあります。囲まれたテキストは改行されません。そして、nobrで指定したテキストの中を改行する場合、<br>タグや<wbr>タグ、あるいは<p>タグを使います。
on a very very very loooooooooooooooooooooong line.<nobr>
Text within a nobr can not be broken and ends up on a very very very loooooooooooooooooooooong line.<br>
Text within a nobr can not be broken and ends up
on a very very very loooooooooooooooooooooong line.<wbr>
Text within a nobr can not be broken and ends up<p>
Text within a nobr can not be broken and ends up
単語で改行
<wbr>
<wbr>タグはハイフンなど区切れがいい場所で、単語で改行するように<wbr>を挟み込みます。ただ、<wbr>タグが使えるブラウザは限られており、以下の例で違いがなければ、この機能を備えていないということです。
○○○-<wbr>○○○-<wbr>○○○
- 何もしない場合
this-is-a-long-string-with-lots-of-hyphens-in-it.- <wbr>を挟み込んだ場合
-
this-
is- a- long- string- with- lots- of- hyphens- in- it.