Q&A
ユニーク・一意は1つのID属性を重複してはいけないと説明書きがあったんですが、この重複ってID属性を"a""b""c"みたいに複数割り振るのはOKだけれど、例えばID="a"の"a"をwhileなどループ文等でいくつも併用する処理はしてはいけないっていうことなんでしょうか
回答7件
0
ベストアンサー
HTMLの意味合い的なルールとして、同じHTMLファイル内に同じID名称はNGということになります。
以下にNG例、OK例を記載いたします。
■NGな例
HTML
1<div id="A">テキスト</div> 2<div id="A">テキスト</div> 3<div id="A">テキスト</div>
■OKな例
HTML
1<div id="A">テキスト</div> 2<div id="B">テキスト</div> 3<div id="C">テキスト</div>
■class 指定であれば、同じ名前でもOK
HTML
1<div class="A">テキスト</div> 2<div class="A">テキスト</div> 3<div class="A">テキスト</div>
while等で、併用されるようなケースの場合は、class 指定を利用されるのがよいかと思います。
ちなみに、同じIDを連続して表記したからと言って、ブラウザで表示されなくなるということはありません。それなりに表示されます。
あくまでも、意味合い的なルールの要素が強いように思われます。
投稿2016/08/26 02:51
総合スコア440
0
重複して定義するのはNG。
重複して参照するのはOK。
投稿2016/08/26 04:00
総合スコア16998
0
#NG
html
1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>NGな例</title> 6 </head> 7 <body> 8 <p id="sample"></p> 9 <p id="sample"></p> 10 <div id="sample"></div> 11 </body> 12</html>
#OK
html
1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>OKな例</title> 6 </head> 7 <body> 8 <p id="sample1"></p> 9 <p id="sample2"></p> 10 <div id="sample3"></div> 11 </body> 12</html>
html
1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>OKな例</title> 6 </head> 7 <body> 8 <p class="sample"></p> 9 <p class="sample"></p> 10 <div class="sample"></div> 11 </body> 12</html>
#NG
このような記述をすると、
html
1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>NGな例</title> 6 </head> 7 <body> 8 <?php for ($i = 0; $i < 3; $i++) : ?> 9 <p id="sample"></p> 10 <?php endfor; ?> 11 </body> 12</html>
結局出力されるHTMLは以下のようになるのでNG
html
1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>NGな例</title> 6 </head> 7 <body> 8 <p id="sample"></p> 9 <p id="sample"></p> 10 <p id="sample"></p> 11 </body> 12</html>
投稿2016/08/26 02:56
退会済みユーザー
総合スコア0
0
その通りです。こういうのが駄目です。
HTML
1<a id="a">ああ</a> 2<a id="a">いい</a> 3<a id="a">うう</a>
投稿2016/08/26 02:48
退会済みユーザー
総合スコア0
0
例えばID="a"の"a"をwhileなどループ文等でいくつも併用する処理はしてはいけないっていうことなんでしょうか
最終的に一つのHTMLファイル内に同じIDが複数存在しないようにすれば問題ありません。
Another HTML Lint - Gateway
The W3C Markup Validation Service
上記サービスなどでHTMLの文法のチェックができますのでこちらを使うことをおすすめします。
投稿2016/08/26 02:47
編集2016/08/26 02:50
総合スコア138
0
下記のようなページ内リンクが存在し、
html
1<a href="#a">リンク</a>
同じidを持つ要素が複数存在する場合、移動するのはソース上で最初にある要素に移動します。
このような事が起こり、それ以外の重複したIDの要素にはページ内リンクでの指定・移動が不可能になる弊害があります。
html
1<h1 id="a">見出し</h1> 2 3<h1 id="a">見出し</h1> 4 5<h1 id="a">見出し</h1>
投稿2016/08/26 03:06
総合スコア2092
0
ひとつの HTML ソースの中に、同じ id をもつ要素は1つしか存在してはいけない、という意味です。
ループや処理はどのようにしても構いません。
投稿2016/08/26 02:50
総合スコア1111
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。