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

[2021-03-21 追記] コメントでご指摘いただいたのですが、実際には「カラ文字のみ」は使用できませんでした。ただ、半角スペースは使えるようでしたので、調査を反映して記事を加筆修正いたしました。ありがとうございました。

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

HTML 5.1 2nd Edition: 3. Semantics, structure, and APIs of HTML documents
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のドキュメント見たら、そっちにはその通りに書いてあった。

Basic HTML data types
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">id = "0"</div>
	<div id="-">id = "-"</div>
	<div id="_">id = "_"</div>
	<div id=":">id = ":"</div>
	<div id=".">id = "."</div>
	<div id="?">id = "?"</div>
	<div id="@">id = "@"</div>
	<div id="#">id = "#"</div>
	<div id='"'>id = """</div> <!- さすがにJSでエラー出たのでここだけシングルクォート -->
	<div id="あ">id = "あ"</div>
	<div id="🍅">id = "🍅"</div>
	<div id="a ">id = "a "</div>
	<div id=" a">id = " a"</div>
	<div id=" a ">id = " a "</div>
	<div id="a a">id = "a a"</div>
	<div id=" ">id = " "</div>
	<div id="">id = ""</div>

	<script>
const dump = function (id) {
	const elem = document.getElementById(id);
	console.log(`[${elem.id}]`, elem.textContent);
};

dump('0');
dump('-');
dump('_');
dump(':');
dump('.');
dump('?');
dump('@');
dump('"');
dump('#');
dump('あ');
dump('🍅');
dump('a ');
dump(' a');
dump(' a ');
dump('a a');
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 = "${id}"`;
	document.body.appendChild(element);
};

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

	</script>
</body>
</html>
結果
結果

カラ文字のみのものは、HTML上では id 属性に値がセットされていない状態になっていた。

それ以外は問題なく作成できた。