気をつけたいHTMLタグの指定方法

@ハクト 2022-11-04 19:13:26に投稿

マークアップで間違いやすいタグ指定を3つピックアップしてみました。

ブラウザが自動で補完する場合もありますが、HTMLの規約に沿って書くことで検索エンジンからの評価も高まるので意識して正しいコードを書いていきましょう。

 

idの複数指定

NG

<!-- 同一ページに同じidがある -->
<div id="sample"></div>
<div id="sample"></div>

<!-- 一つのタグにidを複数指定 -->
<div id="sample1 sample2"></div>

 

OK

<!-- 番号を付けるなどしてid名を変える -->
<div id="sample-1"></div>
<div id="sample-2"></div>

<!-- 一つのタグにidは一つだけ -->
<div id="sample1"></div>

※class名は同一ページ、同一タグに複数指定可能

「ul」「ol」タグの子要素に「li」タグ以外を指定

NG

<ul>
  <!-- 直下には「li」タグ以外指定できない -->
  <div><li>hoge</li></div>
  <p><li>hoge</li></p>
  <li></li>
</ul>

 

OK

<ul>
  <!-- 「li」タグの中で「div,p」タグを指定する -->
  <li><div>hoge</div></li>
  <li><p>hoge</p></li>
  <li></li>
</ul>

 

「p」タグの中に「ブロック要素(div,hタグなど)」を指定

NG

<p>hoge<div>hoge</div>hoge</p>
<p><h1>hoge</h1></p>

 

OK

<!-- 文字ごとにタグを指定する -->
<p>hoge</p><div>hoge</div><p>hoge</p>
<!-- or --><p>hoge</p><p class="">hoge</p><p>hoge</p>

<!-- 「p」→「div」タグに変える -->
<div><h1>hoge</h1></div>

 

 

@ハクト

サービス作り・デザイン好き。70年代生まれのWEBエンジニア。WEBパーツをCSSでカスタマイズしてコピペできるサービスを運営中「Pa-tu」。実装したWEBパーツやツールを利用してWEB情報やライフハックを発信してます。

Twitter