HTMLで同じタグに複数のid属性を指定することはできる？
通常HTMLのid属性はタグにつき1つの設定で、HTML全体で値がユニーク（重複がない）である必要があります。この時同じタグに複数のid属性を設定した場合のstyleやデメリットについて解説します。
HTMLのid属性
HTMLのid属性は要素の固有の識別子としてタグに対して設定しますが、id属性を設定する際にはユニーク（全体で重複が無い）なものを設定するのが基本です。
そしてタグに設定したid属性はセレクタとしてCSSでstyleの記述が行なえます。例えばid属性をheaderとして設定した場合は以下のようにスタイルを書くとそのスタイルが適用されます。
id="header"のタグに対するスタイル
#header {
background-color: #000;
color: #fff;
height: 80px;
}さて、このid属性ですが、タグに2つ・あるいは複数設定することは出来ないのでしょうか？そして複数設定した場合では、どのid属性のスタイルが優先で適用されるのでしょうか？
今回はid属性を複数設定した場合について解説いたします。
HTMLで同じタグに複数のid属性を指定することはできる？
それではHTMLでタグにid属性を複数設定することが出来るか・出来ないかですが、結論からお伝えすると「おすすめできないが、設定自体は出来る」になります。
例えば以下のようにHTMLを記述すると同じタグに複数のid属性を設定することが出来ます。
HTML5の文法的にはNG
HTMLのタグに複数のid属性を設定するのはHTML5の文法的には問題があります。下記のサイトで文法のチェックが行なえます。URLを入力するだけですぐにHTMLの文法チェックができますので、ぜひお試し下さい。
後でid属性を複数設定した状態で上記サイトの文法チェックをかけた結果を紹介しますが、複数のid属性は、結果としては文法エラーとなります。
ただし、文法エラーになったからと言ってブラウザ上でHTMLが表示されないかという事はなく、「文法エラーだが、ブラウザでは表示される」という状態になります。
CSSで思い通りのstyleが適用されない
id属性を複数設定したサンプルコードとプレビュー、文法チェックした結果をご紹介していきます。
id属性自体を複数設定した場合
上記の例のように、1つのタグにたいしてid属性を2つ設定した場合です。
この場合CSSのスタイルは最初に適用したheader1のidの方が効いていることが確認できます。
ではHTMLの文法チェックをしてみましょう。
id属性にスペース区切りで複数のidを指定する
上記の例のように、id属性にスペース区切りで2つのidを指定した場合です。
この場合はCSSのstyleはheader1とheader2の両方効かない形になります。
では文法チェックの結果はどうでしょうか？
id属性にスペース区切りでid属性を複数設定するとこのようになります。
「Bad value」となり、スペース区切りでの指定が間違っているという文法エラーになります。
JavaScriptでid属性からDOMを指定した際にエラーになる
JavaScriptでHTML要素を取得する方法の１つとしてdocumentオブジェクトのgetElementById()メソッドがあります。
id属性を複数指定している場合はこのgetElementById()メソッドが正しく動作しないです。例えば下記の例ではid属性をスペース区切りで2つ設定しているが故にgetElementById（）で複数のidのうちの1つを指定しても取得できません。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function() {
var header1 = document.getElementById('header1');
console.log(header1);
}
</script>
</head>
<body>
<div id="header1 header2">
ヘッダー
</div>
</body>
</html>
まとめ
id属性を複数つけることについて解説してきました。
id属性を複数つけることはブラウザでの表示自体は問題ないが、そもそもHTML5で文法エラーであり、CSS・JS側にとってもデメリットはあってもメリットはほとんどありません。
複数idは出来れば避けるべきですが、どうしてもやむを得ない状況の場合は、どういう影響があるのか、ぜひ今回の記事を参考にしてみて下さい。
id属性自体を複数設定すると、「Duplicate attribute id」となります。
id属性が重複して設定されているという文法エラーです。