HTML(Hyper Text Markup Language)は、<>で囲まれたタグでマークアップされたハイパーテキスト用の言語という意味です。(Hyperとは最新のとか言う意味らしいのですが？？)
日本語や中国語は、他の言語と異なり単語の境界を示す空白文字という概念がありません。 HTMLでは、連続した複数の空白文字(半角スペース、タブ、改行文字など)は、ひとつの単語境界として認識されてしまいます。たとえば、この段落(青字の部分)のHTMLは下のようになっています。
<p
class="light_green"> 日本語や中国語は、他の言語と異なり単語の境界を示す空白文字という概念がありません。
HTMLでは、連続した複数の空白文字(半角スペース、タブ、改行文字など)は、ひとつの単語境界
として認識されてしまいます。たとえば、この段落(青字の部分)のHTMLは下のようになっています。</p>
さて、ある文章をデザイン上、字下げしたい場合にどうしたら良いでしょう。良く使われる手法が<pre></pre>タグで囲 みます。ところが、HTML4.01の仕様書［日本語訳］によると<pre></pre>タグの扱いは、
PRE要素は、視覚系ユーザエージェントに対し、囲われているテキストが"整形済"であることを示す。整形済テキストを取り扱う際、視覚系ユーザエージェントは次の制約を受ける。
- 空白類をそのままにしてよい。
- テキストを固定ピッチフォントでレンダリングしてよい。
- 自動的な語の折り返しを不可能にしてよい。
- 双方向性の処理を不可能にしてはならない。
となっています。ここで問題になるのが[2.テキストを固定ピッチフォントでレンダリングしてよい。]ですね、多くのブラウザは<pre></pre>の部分 を等幅フォント(たとえば"MS 明朝")でレンダリングしてしまいます。そのため著者の意図と異なって、想定したものと異なるフォントでレンダリングされてしまうことがあります。
この部分相当言葉足らずでしたので補足します。
段落の最初の文字を１文字下げる用途にスペースを置くのは邪道かもしれません。確かに日本語の表記は「段落の最初の文字は空白１文字で字下げする」とはなっていますが、それはあくまで視覚的な意味しかなく、空白文字は文章の一部でないためデータとして再利用するときに邪魔になります。
ですので、本来はスタイルシートによってp:{text-indent:1em;}と指定するべきです。
同じページに良い例がありましたので実際にタグで囲んで見ます。シェリーのヒバリです
Higher still and higher
From the earth thou springest
Like a cloud of fire;
The blue deep thou wingest,
And singing still dost soar, and soaring ever singest.
なんとも「まのびした」形になってしまいました。それは、ブラウザが<pre></pre>で、囲まれた部分を等幅フォントでレンダリングしてしまうため、iのように幅の小さな文字の前後が開いてしまったためです。<pre></pre>をスタイルシートでフォントを指定するという方法もありますが、これは<pre>の意味からも非推奨です。
この内容はHTML 3.2と等しく、また一定の行の高さと固定ピッチのフォントでレンダリングされたテキストの配置を保つことが意図されている。著者が、この挙動をスタイルシートによって変更することは、好ましくない。
このような字下げには、文字実体参照の を使うのが良いでしょう。（ は[改行しない半角スペース(not cause a line break space)]を意味します）
【HTML4.01[# 行区切りの制御]】
では、実際にこの詩で用いられている字下げのためのスペースを で置き換えてみましょう。また、改行しないで１行であることを意図されている単語の間のスペースも で置き換えてあります。フォントはスタイルシートで手書き系(cursive)列が指定してあります。（実際、それがどのフォントで表示されるかはブラウザの指定によります。）
Higher still and higher
From the earth thou springest
Like a cloud of fire;
The blue deep thou wingest,
And singing still dost soar, and soaring ever singest.
この部分のHTMLは、
<p class="poem">
Higher still and higher<br>
From the earth thou springest<br>
Like a cloud of fire;<br>
The blue deep thou wingest,<br>
And singing still dost soar, and soaring ever singest.
</p>
パッと見には、複雑そうですが、たいていのＨＴＭＬエディタは（まともなＨＴＭＬエディタなら・・）半角スペースを入力すると が自動的に入力されるはずです。（私のNetscape Composerもそうなっています。）
また、メモ帳などのテキストエディタで作成した文書をＨＴＭＬのソースに直接貼り付けると言う作成方法が多いのですが、そのときは半角スペースをテキストエディタの［置換機能］を利用して［ ］→［ ］に変換してしまえば良いです。
「PRE要素は、視覚系ユーザエージェントに対し、囲われているテキストが"整形済"であることを示す。整形済テキストを取り扱う際、視覚系ユーザエージェントは次の制約を受ける。」ですね。この説明では、いくらなんでも解りづらいのですが、簡単に言うと・・空白類はいくつあってもそのままで、等幅フォントを用いて、行の途中で折り返しをしないで表示されることを期待して書かれたテキストを、表示するときに使います。
Ａ ｜ ／｜ ／ ｜ ／ ｜ ／ ↑ ｜ ↑ ち・／・−−−さ ・ ｜ ｜ ｜ ｜ ｜ ／ ｜ ｜ ｜ ｜ ／ ／ ｜ ｜ ／ ∀ ｜ ｜／ 点対称 線対称 面対象
さて、日本語の場合は、そもそも単語境界としての半角スペースがないため、和歌、俳句、詩などを書くときブラウザの幅が小さくても改行して欲しくない文字境界、改行するならここでというものがあります。そんな時、どうしたら良いのでしょう。
たとえば、次の俳句で、もし画面の幅が小さい場合は、五・七・五で区切りたいときってありますよね。結論から言うとHTML4.01では、それをカバーできません。MS-IE(マイクロソフト-インターネットエキスプローラ)やNN(ネットスケープナビゲーター)など一部のブラウザのみがサポートしている<NOBR>タグを用いれば、不可能ではありません。(非推奨です。)
<NOBR></NOBR>で囲まれた区間は改行をしません。
