HTMLでid属性が重複した時の動きについて現役デザイナーが解説【初心者向け】
初心者向けにHTMLでid属性が重複した時の動きについて解説しています。id属性は要素に固有の名前を設定するものです。id属性が重複するとどうなるのか、重複しないための対象方法について学びましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日 調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名 調査手法:インターネット調査
HTMLでid属性が重複した時の動きについて解説します。
そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。
今回は、HTMLに関する内容だね!
どういう内容でしょうか?
id属性が重複した時の動きについて詳しく説明していくね!
お願いします!
id属性の文法違反を知ろう
HTMLタグのid属性に定められた値は、ブラウザの技術に固有の識別子として扱われるため、同一ページのHTML文書内にて重複してはならない文法の規則になっています。この規則に反して間違えた場合、そのHTML文書は、劣化の一途をたどります。
id属性が重複するとどうなるか
もし、id属性が重複していた場合は、同一ページのHTML文書内にて重複してはならない文法の規則に基づき、CSSのスタイルの適応などにて、ブラウザに意図しない表示や不具合が発生します。
また、JavaScriptにおいて、要素のid属性を抽出条件にした関数の実行にて、要素の参照や取得に失敗してしまう結果の可能性があります。これらの現象は、古いブラウザの技術では、顕著でした。
近年のブラウザの技術では、多少なりの文法違反を許容するように改良されていますが、文法としての規則は標準化団体によって維持されていますので、変わっていません。
そのため、ブラウザの技術に、HTML文書が厳密に解釈される場合は、依然の不具合が危惧されます。
重複させないための方法
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サイトを公開できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。