#PCDATA(parsed character data)は解析の対象になるので、「<」, 「>」はそれぞれタグの開始, 終了と解釈されてしまいます。よって、直接記すのではなく文字を参照しなければならなりません。&は文字実体参照の開始記号として使われるので、それ以外の用途なら文字を参照します。HTML 4では1114111までISO 10646の文字コード位置で参照可能ですが、HTML 3.2は255までです。一覧表
※HTML 4では10進数だけでなく16進数でも良いことになってはいますが、10進数の方が無難です。実体参照では大文字小文字が区別されます。
< → < (<) > → > (>) & → & (&) Å → Å (Å) å → å (å)
CDATA(character data) は、文字データの終りを示す区切り子「</」の他にはマークがない文脈に出現する文字です。alt="<代替テキスト>"としても単なる文字データなのですが、属性値のCDATAでは文字実体参照は参照している文字として扱われますので、文字実体参照の開始記号「&」を普通の文字として使うには、文字を参照しなければならなりません。(2重)引用符で括った属性値中に(2重)引用符を普通の文字として使いたい場合などにも、文字を参照することができます。
属性値のデータ型については、一覧(HTML / XHTML)をご覧下さい。
title="<タイトル>" <!-- 間違われるといけないので --> title=""タイトル"" title='"タイトル"' title="タイトル & タイトル"
要素の内容になっているCDATAにおいては、全て単なる文字データとして扱われます。SCRIPT, STYLE要素の内容はHTML 4ではCDATAとされているので、これらに対応していればHTMLのコメントはコメントとして扱われません。対応していなければコメント扱いなので、中身が表示されてしまう心配もありません。
「</」がCDATAの終りとみなされないようにするには、以下のようにう回避します。
<SCRIPT type="text/javascript">
<!--
document.write('<P>段落の卵<\/P>');
document.write('<P>段落の卵<'+'/P>');
document.write('<P>段落の卵<STRONG>じゃない<\/STRONG></P>');
// スクリプトが実行される → <P>段落の卵じゃない</P>
//-->
</SCRIPT>
※「<!--」, 「//」はJavaScriptの単一行コメントでもありますが、SCRIPT要素に対応していないUAのことを考えると、「<!--」を安易に使用すべきではないと思います。JavaScriptの開発元であるNNの場合、「<!--」と「//-->」が対になっていないとエラーになるようなので、「<!--」は未対応のUAから隠すという目的のためだけに使うのかもしれません。また、「-->」を無視する実装のブラウザもありますが、エラーになるのが普通なので、きちんと「//-->」にしてください。
CSSの場合は、内容に「<!--」, 「-->」を記すことは認められていますが、「<!--」, 「//」は単一行コメントではありません。
<STYLE type="text/css">
<!-- body { background: white;color: black } /* CSSに
単一行コメントはありません */ -->
</STYLE>
IDは、名前文字(HTML 4では、アルファベット, 数字, ハイフン, アンダースコア, コロン, ピリオド)のみで構成され、かつ、名前開始文字(HTML 4ではアルファベットのみ)で始まらなければなりません。
CSS1の識別子(クラス, IDなど)に使える文字は、アルファベット, 数字, ハイフン, Unicodeの161-255(CSS2では161以上)のみです。ただし、識別子の先頭にハイフンと数字は使えません。使えない文字をどうしても使いたい場合は、バックスラッシュで文字をエスケープするか、バックスラッシュに続く最大4桁(CSS2では最大6桁)の16進数で文字を参照します。また、CSS2では16進数に続く空白類文字が一つだけ無視されことになっていて、16進数の区切りを明確にできます。
<STYLE type="text/css">
.-7x { color: red } /* 識別子の先頭にハイフンは使えない */
.\2D7x { color: red } /* 16進数の区切りが不明確 */
.\2D 7x { color: red } /* CSS2なら区切りを明確にできる1 */
.\00002D7x { color: red } /* CSS2なら区切りを明確にできる2 */
.\00002D 7x { color: red } /* CSS2なら区切りを明確にできる3 */
.\-7x { color: red } /* エスケープすればCSS1でもOK */
[class="-7x"] { color: red } /* CSS2ならこれでも可 */
</STYLE>
※ 実用レベルでサポートしているUAは極少数です。外部CSSファイルで日本語を使う場合の注意点については、日本語を含む規則をご覧ください。
※ 「空白類文字が一つだけ」の部分について、CR/LFの組み合わせ(Windowsの改行)は一つの空白類文字として扱うべきと訂正されています。
※ CSS2の正誤表でアンダースコア(_)は識別子に使えると訂正されました。
JavaScriptで日本語を使う場合にも注意が必要です。外部JSファイルを、WinIE4はシフトJIS、MacIE4はUTF-8で符号化されているみなすので、確実に文字化けやエラーが発生します。
全く日本語に対応していない場合だと、シフトJISで符号化した ―, ソ, Ы, 噂, 浬, 欺, 圭, 構, 蚕, 十, 申, 曾, 箪, 貼, 能, 表, 暴, 予, 禄, 兔, 喀, 媾, 彌, 拿, 杤, 歃, 濬, 畚, 秉, 綵, 臀, 藹, 觸, 軆, 鐔, 饅, 鷭 の2バイト目をISO-8859-1のバックスラッシュとみなして引用符をエスケープしてしまい、エラーになったりします。
str = "予定表"; str = "□\□□□\"; // 日本語未対応だとこう見える // 直後が特定の文字でない「\」は捨てられる str = "予\定表\ "; // 回避策
以上の問題を回避するため、Unicodeのコード位置で参照する方法があります。ただし、"日本語"の部分に符号化方式を誤判定されるとまずい文字を使っている場合は、エラーになる可能性もあります。
"\u3042".length == 1 ? str = "\u65E5\u672C\u8A9E" : str = "日本語";
"\u3042".length == 1 ? str = "\u65E5\u672C\u8A9E"
: str = unescape("%93%FA%96%7B%8C%EA");
/* 予め「%HH」形式にエスケープしておいてアンエスケープ
たぶん最も多くのブラウザ対応できる方法 */
document.write(str);
Opera6(以前のバージョンは未確認), iCab, NC4.06以降, IE4以降に限定して良いという条件なら、以下のように日本語を排除してしまえば安全確実に使えます。ただし、NC4.06〜NC4.08でステータスバーの日本語が文字化けするのは、原因が異なるので違う対策をする必要があります。
str = "\u65E5\u672C\u8A9E"; document.write(str);
iCab, Netscape6, MacIE5, WinIE5.01は外部JSファイルをHTML文書と共通の符号化方式であるものとして扱い、この方式で統一されそうです。また、Netscape6, MacIE5, WinIE6はSCRIPT要素のcharset属性をサポートしているので、異なる符号化方式を組み合わせることも可能です。
<SCRIPT type="text/javascript" src="x.js" charset="EUC-JP"></SCRIPT>
※ WinOpera6.0は自動判定のみ。
URL(Uniform Resource Locator)は接続機構における住所といった感じで、引っ越してしまうこともありますが、URN(Uniform Resource Name) ならリソースが存在しなくなったり利用できなくなっても一意に特定できるとされています。つまり、書籍のISBNのように、リソースを名前で特定する方法も含めて、リソースを特定する手段全体がURI(Uniform Resource Identifier)です。
「http://east.portland.ne.jp/~sigekazu/css/ascii.htm」
はURLであり、URIでもあります。
URIでは、ASCII以外の文字はそのままでは使えません。ASCIIでも除外されている文字と予約されている文字があって、除外されている文字はURI形式にエンコードしないとダメです。予約されている文字は、特定の構文(スキーム)においては特別な意味を持たされているので、自由には使えません。ややこしいので、Another HTML-lint gatewayでチェックしてもらって下さい。例えば、「<」, 「>」はURIでは使えない文字とされているので、HTMLで文字を参照しても使えないことに変わりはありませんが、「%3C」, 「%3E」とエンコードしてしまえば使えます。逆に、「&」は予約されていて、CGIなどでよく利用されていますが、HTMLでは文字参照の開始文字とみなされるので、文字を参照しなければなりません。
正式な定義はないと思いますが、機種依存文字などと呼ばれ、使ってはいけないとされている文字もあります。
| 文字 | #PCDATA | ID (HTML 4) | 識別子 (CSS1) | URI (RFC 2396) |
|---|---|---|---|---|
| SP | ○ | × | × | %20 (除外) |
| ! | ○ | × | \21 | ○ |
| " | ○ | × | \22 | %22 (除外) |
| # | ○ | × | \23 | %23 (除外) |
| $ | ○ | × | \24 | %24 (予約) |
| % | ○ | × | \25 | %25 (除外) |
| & | & | & | × | \26 | %26 (予約) |
| ' | ○ | × | \27 | ○ |
| ( | ○ | × | \28 | ○ |
| ) | ○ | × | \29 | ○ |
| * | ○ | × | \2A | ○ |
| + | ○ | × | \2B | %2B (予約) |
| , | ○ | × | \2C | %2C (予約) |
| - | ○ | △ | △(\2D) | ○ |
| . | ○ | △ | \2E | ○ |
| / | ○ | × | \2F | %2F (予約) |
| 0 | ○ | △ | △(\30) | ○ |
| 1 | ○ | △ | △(\31) | ○ |
| 2 | ○ | △ | △(\32) | ○ |
| 3 | ○ | △ | △(\33) | ○ |
| 4 | ○ | △ | △(\34) | ○ |
| 5 | ○ | △ | △(\35) | ○ |
| 6 | ○ | △ | △(\36) | ○ |
| 7 | ○ | △ | △(\37) | ○ |
| 8 | ○ | △ | △(\38) | ○ |
| 9 | ○ | △ | △(\39) | ○ |
| : | ○ | △ | \3A | %3A (予約) |
| ; | ○ | × | \3B | %3B (予約) |
| < | < | < | × | \3C | %3C (除外) |
| = | ○ | × | \3D | %3D (予約) |
| > | > | > | × | \3E | %3E (除外) |
| ? | ○ | × | \3F | %3F (予約) |
| @ | ○ | × | \40 | %40 (予約) |
| A | ○ | ○ | ○ | ○ |
| B | ○ | ○ | ○ | ○ |
| C | ○ | ○ | ○ | ○ |
| D | ○ | ○ | ○ | ○ |
| E | ○ | ○ | ○ | ○ |
| F | ○ | ○ | ○ | ○ |
| G | ○ | ○ | ○ | ○ |
| H | ○ | ○ | ○ | ○ |
| I | ○ | ○ | ○ | ○ |
| J | ○ | ○ | ○ | ○ |
| K | ○ | ○ | ○ | ○ |
| L | ○ | ○ | ○ | ○ |
| M | ○ | ○ | ○ | ○ |
| N | ○ | ○ | ○ | ○ |
| O | ○ | ○ | ○ | ○ |
| P | ○ | ○ | ○ | ○ |
| Q | ○ | ○ | ○ | ○ |
| R | ○ | ○ | ○ | ○ |
| S | ○ | ○ | ○ | ○ |
| T | ○ | ○ | ○ | ○ |
| U | ○ | ○ | ○ | ○ |
| V | ○ | ○ | ○ | ○ |
| W | ○ | ○ | ○ | ○ |
| X | ○ | ○ | ○ | ○ |
| Y | ○ | ○ | ○ | ○ |
| Z | ○ | ○ | ○ | ○ |
| [ | ○ | × | \5B | %5B (除外) |
| \ バックスラッシュ | ○ | × | \5C | %5C (除外) |
| ] | ○ | × | \5D | %5D (除外) |
| ^ | ○ | × | \5E | %5E (除外) |
| _ | ○ | △ | \5F ○に訂正 | ○ |
| ` | ○ | × | \60 | %60 (除外) |
| a | ○ | ○ | ○ | ○ |
| b | ○ | ○ | ○ | ○ |
| c | ○ | ○ | ○ | ○ |
| d | ○ | ○ | ○ | ○ |
| e | ○ | ○ | ○ | ○ |
| f | ○ | ○ | ○ | ○ |
| g | ○ | ○ | ○ | ○ |
| h | ○ | ○ | ○ | ○ |
| i | ○ | ○ | ○ | ○ |
| j | ○ | ○ | ○ | ○ |
| k | ○ | ○ | ○ | ○ |
| l | ○ | ○ | ○ | ○ |
| m | ○ | ○ | ○ | ○ |
| n | ○ | ○ | ○ | ○ |
| o | ○ | ○ | ○ | ○ |
| p | ○ | ○ | ○ | ○ |
| q | ○ | ○ | ○ | ○ |
| r | ○ | ○ | ○ | ○ |
| s | ○ | ○ | ○ | ○ |
| t | ○ | ○ | ○ | ○ |
| u | ○ | ○ | ○ | ○ |
| v | ○ | ○ | ○ | ○ |
| w | ○ | ○ | ○ | ○ |
| x | ○ | ○ | ○ | ○ |
| y | ○ | ○ | ○ | ○ |
| z | ○ | ○ | ○ | ○ |
| { | ○ | × | \7B | %7B (除外) |
| | | ○ | × | \7C | %7C (除外) |
| } | ○ | × | \7D | %7D (除外) |
| ~ チルド | ○ | × | \7E | ○ |
一部、正しく変換できない文字があるかもしれません。参考リンク