HTMLで一つのタグにidを複数使う方法を現役エンジニアが解説【初心者向け】

HTMLで一つのタグにidを複数使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

目次

• 同一のid名はHTMLファイルの中で1回しか登場しない
• 同じ名称のidを複数回つかうデメリット
• １つのhtmlファイルに複数のidを指定する
• idとclassの使い分け
• HTMLを学習中の方へ

そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

 

同一のid名はHTMLファイルの中で1回しか登場しない

HTMLではid属性をつけることで要素の識別をすることが出来るようになります。ひとつのHTMLファイルに対して同じid名を用いることはできません。

つまり、今回のタイトルに有るHTMLで一つのタグにidを複数使うことはできないというのが文法上の決まりです。

 

同じ名称のidを複数回つかうデメリット

1つのhtmlファイルで同じidを複数回使ったり、一つのタグにidを複数使ってしまうと文法上のエラーになります。

そうは言っても、基本的には最初の方に記述した要素に適用されてしまいます。CSSでは同じidでも表示出来てしまう場合がありますが、idを取得して利用するJavaScriptでは最初の要素のみを取得して動作することになります。

例え同じidを指定してもhtmlの場合は、開発者ツールなど利用しない限り表示上エラーメッセージが出ることは有りません。

しかし、同じhtmlファイル内で、同じ名前のidを複数利用することは、文法上は間違った使い方になります。

 

htmlの文法上はエラーになる

htmlを表示しているだけではわかりませんが、開発者ツールなどでチェックするとhtmlの文法上はエラーになることが調査できます。

SEOでマイナス要因になる

見ている人からすると、htmlの文法上のエラー自体は気になりませんが、SEO上はマイナス要因になるので、同じhtmlファイルの中で同じ名称のidは1回だけしか利用しないという点は守ったほうが良いです。

複数人で開発する場合混乱する

複数人で開発する場合、同じ名前のidを用意すると、どのidが適用されているかわからなくなります。

そのため、単に表示上エラーがないからといって、同じ名前のidを複数個用意することは避けましょう。

表示状はエラーが出ませんが、開発者ツールなどでみると文法上はエラーになる実装です。

 

[PR] Webデザインで副業する学習方法を動画で公開中

１つのhtmlファイルに複数のidを指定する

1つのhtmlファイル内に複数のidを指定することは、別の要素であれば文法上問題有りません。

divごとに複数のidを指定して色を変える

1つのhtmlファイル内に複数のidを指定する場合、たとえばdivごとに複数のidを指定して色を変えることが可能です。

html

<div id="num1">num1
  <div id="num2">num2</div>
  <div id="num3">num3</div>
  <div id="num4">num4</div>
</div>

 

css

#num1 {
  color: green;
}

#num1 #num2{
  color: red;
}

#num3 {
  color: blue;
}

 

解説

<div id="num1">num1

に対して、次のcssが適用されています

#num1 {
  color: green;
}

これによりnum1は緑色で表示されます。

 

id=”num1″で囲まれた

<div id="num2">num2</div>

に対して、次のcssが適用されています

#num1 #num2{
  color: red;
}

これにより、num2が赤色になります。

 

<div id="num3">num3</div>

に対して、次のcssが適用されています

#num3 {
color: blue;
}

これにより、num3が青色になります。

 

<div id=”num4″>num4</div>

に対しては個別のcssは指定されていませんが、<div id=”num1″>num1で囲まれているため、次のcssが適用されます。

#num1 {
color: green;
}

結果的にnum1と同様に緑色になります。

 

実行結果

1つの要素に複数のidを指定するとエラーになる

1つのhtmlファイル内に複数のidを指定することはできますが、1つの要素に複数のidを指定するとエラーになります。

html

<div id="num1" id="num5">num1
  <div id="num2">num2</div>
  <div id="num3">num3</div>
  <div id="num4">num4</div>
</div>

 

css

#num1 {
  color: green;
}

#num1 #num2{
  color: red;
}

#num3 {
  color: blue;
}

 

解説

実行結果では分かりませんが、htmlエラーをチェックするツールを利用すると、次のコードのid=”num5″の部分でエラーになることがわかります。

<div id="num1" id="num5">num1

エラーの内容はidが重複しているというエラーになります。

 

実行結果

idとclassの使い分け

classを利用した実装例はこちらの記事を参考にしてみてくださいね。

コーディングの基礎！HTMLでdivタグを使う方法 | TechAcademyマガジン

 

 

HTMLを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

HTMLを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！