HTMLで同じタグにidを複数指定はだめ？
HTMLではCSSでデザインやレイアウトを調整するためにid・classを設定します。
この際、何らかの理由で複数のidを指定したいときがあると思いますが、複数のidを同じタグに指定するのはコーディング規約違反になります。
そのため、以下のような書き方は認められていません。
<p id="main post">コンテンツ</p>
詳しくは後述していますが、同じid名を同じHTML内で使い回すことはできないため、idを複数指定するメリットがまったくないのです。
HTMLで同じタグにidを複数指定するとどうなる？
同じタグに複数idを指定することはコーディング規約違反になり、デザインにも影響が出ます。
<div id="main post">コンテンツ</div>
上記サンプルだとdivタグ内のid名「btn1 ptxt」が1つのid名として認識されており、なおかつid名・class名にスペースを含んではいけないというルールがあるため、CSSを設定することができません。
<style>
#btn1 ptxt{
font-weight:bold;
}
</style>
ですので上記のようなCSSを書いても意味がありません。
CSSをしっかり指定すれば、たとえid名が複数あったとしても問題ないのではと思うかもしれませんか、問題しかないので絶対に複数id指定しないようにしましょう。
どうしても複数id指定したいのであれば、idではなくclassを使ってコーディングするのがHTML上のルールです。
ですので、idを複数に分けてCSSを書きやすくしたいという意図があったとしても必ずidは1タグに1つというルールを徹底するようにしてください。
記述するCSSが長くなるのでしたら、以下のように分割してコーディングすれば済む話です。
#main{
color:red;
}
#main{
background-color:black;
}
こうすれば1つのidでCSS記述を複数に分けられます。最終的には両方のCSSが組み合わされるので、この書き方を覚えておくといいでしょう。
同じHTMLでidが重複するとどうなる？
複数のタグで同じidを指定して重複した場合、サイトコンテンツに不都合が発生することがあります。
idが重複してしまうと、サイト内の一部機能に不具合が発生する箇所があるのでそれぞれ見ていきましょう。
ページ内リンクがおかしくなる
HTMLではページ内リンクを設定することができますが、このページ内リンクの飛び先にはidを指定するのがルールとなっています。
そのため、ページ内リンクに設定しているid名が複数あると、全く違うところにジャンプしてしまい、ページ内リンクが正しく働かなくなってしまうことがあります。
jQueryでエラーが起きる
最近のWebサイトの多くにはJavaScriptライブラリであるjQueryが使われています。
そのjQueryでid名を使用したプログラムが書かれていた場合、もしくはid名を使用したプログラムを書く場合、正常に動作しなくなる可能性が高いです。
jQueryでid名を使用する際、コーディング規約に則っている(同じid名が複数存在しない)前提で処理されるため、同じid名が複数あると動作がおかしくなります。
下記サンプルコードを見てください。
上記はボタンを押すとアラートメッセージが表示されるようにコーディングしたつもりですが、なぜかテキストをクリックするとアラートメッセージが表示されるようになっています。
これは、ボタンに設定されたid名が先にpタグに設定されていることが原因です。
このように、idにはCSSでデザイン付けする以外の役割を担っているので、絶対にidは重複させないようにしましょう。
重複させてしまわないか不安という方は、たとえHTML内に1つしか存在しない名前でもidではなくclassを指定するようにしましょう。