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

初心者向けにHTMLでid属性が重複した時の動きについて解説しています。id属性は要素に固有の名前を設定するものです。id属性が重複するとどうなるのか、重複しないための対象方法について学びましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

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

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

 

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

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

id属性が重複した時の動きについて詳しく説明していくね!

大石ゆかり

お願いします!

 

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

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

 

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

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

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

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

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

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

重複させないための方法

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では初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

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