Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8576

HTMLでid属性は重複してはいけない!重複を防ぐためには

$
0
0

プログラミング勉強日記

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の使い分け


Viewing all articles
Browse latest Browse all 8576

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>