1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

プログラミング勉強日記

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?