SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
てるてる動画

【html】ぜひともやめて欲しいハイフンの連続

ハイフン2つ以上の連続は、不用意にHTMLに書かないで欲しい。

HTML4では、コメントの中にハイフンを複数続けて書かないで欲しいと言っている。XHTMLでは、コメントの中にハイフンを複数続けて書くのは仕様に反する。

そんなハイフン複数連続をコメントの中に書くと、Firefoxなどのブラウザで、このような残念な表示になる。

何が残念かというと、意図した表示になっていないのだが、以下説明。

例えば、セレクトボックスの一番上をこんな風に書いたとする。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>サンプルHTML</title></head>
<body>
<select name="test">
<option>--</option>
<option>有効</option>
<option>無効</option>
</select>
</body>
</html>

ちょっとコメントアウトしたいとき、こうしたとする。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>サンプルHTML</title></head>
<body>
<!--
<select name="test">
<option>--</option>
<option>有効</option>
<option>無効</option>
</select>
-->
</body>
</html>

<option>-- のところでコメントが終了し、続きは通常のテキストとして表示されることとなる。

次のような対策を心がけてはどうでしょう。

  1. 絶対ハイフン2つを入れないよう気をつける
  2. 表示にハイフンを入れたいときは文字参照 &#45; を使う。
  3. 横線のつもりでハイフンを並べるときは、半角スペースを間に入れて「 – – – – – 」のようにする。(点線になってしまうけど、事件が起きるよりまし。)

関連するメモ

コメント