プログラミング勉強日記

2020年10月3日
HTMLのコードを見ていたとところ、id属性を重複させてしまっていることがあったので、こちらの記事でもclassとid属性について扱っているが改めて、重複を防ぐためにするべきことを簡単にまとめる。

id属性とは

　CSSのセレクタ(h1, p)などでスタイルを指定することはできるが、h1やp要素は多く利用されるので、同じ要素でも別のスタイルを使用したいときにHTMLのid属性を使う。
　HTMLタグのid属性によって決められた値はブラウザの固有の識別子として扱われるので、id属性は同じページにHTML内に重複してはいけない！！

id属性を重複して書いた場合

　CSSのスタイルの適応において、ブラウザに不具合が生じることもあれば、全く影響がない場合もある。また。JSにおいても要素のid属性を抽出条件に関した関数の実行にて、要素の参照や習得に失敗してしまう結果の可能性がある。

重複を防ぐためには

　Markup Validation Serviceを使うことで、調べることができる。id属性が重複している場合にはErrorとWarningの内容として表示される。他にも文法エラーなどを抽出してくれる。

参考文献

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