HTMLでid属性が重複した時の動きについて現役デザイナーが解説【初心者向け】

HTMLでid属性が重複した時の動きについて解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

 

id属性の文法違反を知ろう

HTMLタグのid属性に定められた値は、ブラウザの技術に固有の識別子として扱われるため、同一ページのHTML文書内にて重複してはならない文法の規則になっています。この規則に反して間違えた場合、そのHTML文書は、劣化の一途をたどります。

 

id属性が重複するとどうなるか

もし、id属性が重複していた場合は、同一ページのHTML文書内にて重複してはならない文法の規則に基づき、CSSのスタイルの適応などにて、ブラウザに意図しない表示や不具合が発生します。

また、JavaScriptにおいて、要素のid属性を抽出条件にした関数の実行にて、要素の参照や取得に失敗してしまう結果の可能性があります。これらの現象は、古いブラウザの技術では、顕著でした。

近年のブラウザの技術では、多少なりの文法違反を許容するように改良されていますが、文法としての規則は標準化団体によって維持されていますので、変わっていません。

そのため、ブラウザの技術に、HTML文書が厳密に解釈される場合は、依然の不具合が危惧されます。

 

[PR] Webデザインで副業する学習方法を動画で公開中

重複させないための方法

Markup Validation Serviceにて、調べることができます。id属性が重複している場合は、以下の「Error」と「Warning」の内容が提示されます。

[html]

  <div id="list"></div>
  <div id="list"></div>

英文の内容が表示されていますが、これらの内容は機械語にも近い表現なので、例として「Error」の内容を和訳します。「エラーとして、重複のIDはlistです。12行目の一文字目から、12行目の15文字目までが検知されました」と読み直せます。

[html]

<div id="list-1"></div>
<div id="list-2"></div>

同義や同類の英単語の使用を意図して避けることや、番号による区分を付加することにて重複を免れます。「Error」と「Warning」の提示が一切ない場合は、以下の案内が表示されます。

上記の内容は、「文書の点検に完了しました。間違いや警告がまったく見つかりません」と読み直せます。状況によっては、全ての「Error」と「Warning」を必ずしも直さなければならないわけではありませんが、信念として常に「Error」は取り除くべきです。

 

監修してくれたメンター

井内洋平 TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

TechAcademyでは初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。