HTML | 複数のclass名やid名を記述する方法、カンマ区切りはNG?

HTML 属性,HTML

HTML | 複数のclass名やid名を記述する方法、カンマ区切りはNG?

HTMLで複数のclass名やid名を記述する方法とサンプルコードを紹介しています。

複数のclass名やid名を記述する

HTMLでclass名やid名は、半角スペースで区切る事で複数指定する事が可能です。

<p id="main name" class="foo1 foo2 foo3">Hello world</p>

id名はHTML上、ひとつのページ内でひとつしか存在しないように設計されますが、ひとつの要素に対して複数のid名を指定する事は問題ありません。

また、HTMLの仕様上、複数の属性値を指定する場合、半角スペースによる区切り文字以外の方法は認められていません。
表示上問題なくてもカンマ区切りなどで複数の属性値を指定する事はできません。

CSSなどはカンマ区切りでid名やclass名を一括指定するので混同しないように注意が必要です。

カンマ区切りなどで指定されているケースもありますが、それらは、カンマ記号を含んだひとつの属性値として取得するプログラム側で取得し、プログラム側にて処理しています。

JavaScriptなどでは、idやclass名が複数存在すると過程して、属性値を配列で受け取るようにします。

HTML 属性,HTML

Posted by Yousuke.U