HTMLにおける「スペース」の一覧

東京Kです。
良い話のネタが思いつかなかったので、簡単に載せられるネタで。お盆ですし。

というわけで、知っている人は皆さん知っているけど知らない人は全く知らない、HTMLにおけるスペースの種類をまとめてみました。

意外と新人さんが、半角スペースをたくさん書いても幅が変わらない!ってはまるんでね。

半角空白

英語などの言語では、日本語のように助詞で単語を区切るのでは無く、空白文字で区切りられる。

HTMLでは、半角空白やタブや改行は英文の単語区切り文字として認識する。
その結果、半角スペースをたくさん書いても1つのスペースに置き換わったりする。

また、HTMLでは、行末近くで空白文字を見つけたら、その位置で折り返し(改行)を自動的に行う。単語中でも折り返したければ、後述の<wbr>タグで。

全角空白

全角スペースが表示される。というか、ほかの日本語文字と同じ扱いなので、書けば書いた分だけ空白が表示される。

改行

HTMLでは半角空白と同等の意味を持つ。

改行したければ<br>タグでどうぞ。
※なお、段落の区切りは<p>タグでどうぞ。

&nbsp;

単なる空白の実体参照文字と思われがちだけど「改行しない空白」と言う意味。
半角空白は、行末での折り返しの目印として使われるが、&nbsp;は行末の折り返しのためのスペースとしては使われない。
また、半角空白と異なり、たくさんあれば、その分スペースが入る点も、半角空白と異なるポイント。

&emsp;

「Mと同じ幅のスペース」と言う意味。
※CSSのサイズ指定で使うemと言う単位のsp(space)という意味。

&ensp;

「Nと同じ幅のスペース」と言う意味。mの大体半分。
和文では半角スペースと同じ。

番外:<wbr>タグ

「空白は無いが改行可能」と言う意味。
前に書いたとおり、通常、HTMLでは単語の途中で文字が折り返さないが、長い英単語の途中で改行が起きて良い部分に入れると、単語の途中であっても折り返しが発生する。

日本語の文章には空白が存在しないため、ブラウザは折り返し位置を判断できないことがある。このような場合に、苦肉の策で使うことも過去にはあった。