• HTML5では id の属性値に使える文字に制限は無い。
  • 先頭が英字じゃなくても平気だし、記号も全角文字も絵文字もなんでも使える。

すごく今更なんだけど、ふと id の属性値に使える文字を調べてたら、HTML5.1のドキュメントに「なんでも使ってOK」みたいに書いてあった。

There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.

あれ? なんとなく id って特殊な記号が使えなかったり、先頭が英字じゃなきゃいけないみたいなルールがあったような気がしてたんだけど……。

と思ってHTML4.01のドキュメント見たら、そっちにはその通りに書いてあった。

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

HTML4.01では、先頭は必ず半角英字。それ以降は半角英数字, ハイフン, アンダースコア, コロン, ピリオドだけ。

HTML5になって変わってたの知らなかった。

JavaScriptで取得してみる

ほんとかよと思ったので、トンチンカンな id を設定したHTML要素をJavaScriptから取得して、さらに id にアクセスしてみる。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
	<meta name="robots" content="noarchive" />
	<title>HTML5ではidになんでも使える? その1</title>
</head>
<body>
	<p style="color:red;">※ブラウザの開発者ツールでコンソールを見てください。</p>
	<div id="0">0</div>
	<div id="-">-</div>
	<div id="_">_</div>
	<div id=":">:</div>
	<div id=".">.</div>
	<div id="?">?</div>
	<div id="@">@</div>
	<div id="#">#</div>
	<div id='"'>"</div> <!- さすがにJSでエラー出たのでここだけシングルクォート -->
	<div id="あ">あ</div>
	<div id="🍅">🍅</div>

	<script>
const dump = (id) => {
	console.log('id =', document.getElementById(id).id);
};

dump('0');
dump('-');
dump('_');
dump(':');
dump('.');
dump('?');
dump('@');
dump('"');
dump('#');
dump('あ');
dump('🍅');
	</script>
</body>
</html>
結果
結果

問題なし。

JavaScriptで作ってみる

ダブルクォーテーションを id に設定した要素をJavaScriptで作って設置したら、ブラウザ上の表示がどうなるか気になったので、逆もやってみる。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
	<meta name="robots" content="noarchive" />
	<title>HTML5ではidになんでも使える? その2</title>
</head>
<body>
	<p style="color:red;">※ブラウザの開発者ツールでHTMLとコンソールを見てください。</p>
	<script>
const put = (id) => {
	const element = document.createElement('div');
	element.id = id;
	element.textContent = id;
	document.body.appendChild(element);
};

put('0');
put('-');
put('_');
put(':');
put('.');
put('?');
put('@');
put('"');
put('#');
put('あ');
put('🍅');

// 念のためダブルクォーテーション再取得してみる
console.log('id =', document.getElementById('"').id);
	</script>
</body>
</html>
結果 (HTML)
結果 (HTML)
結果 (コンソール)
結果 (コンソール)

こっちも問題なし。

ていうか別に id じゃなくても、属性値にダブルクォーテーションをセットすることくらい、普通にあるか……。