HTMLの注意が必要な構造と違反一覧表
現在、「HTML Living Standard」が標準とのこと。
あったら助かるかなと思い、自分用にメモ。
AIにまとめてもらいました。
| 要素 | 注意が必要な使用例 | 注意が必要な理由 | 推奨される代替方法（改善案） |
|---|---|---|---|
<a> |
<a><p>リンク</p></a> |
<p> は段落要素で、インライン要素の中に入れるのは、今のHTMLでは仕様違反ではないが、使い方によってはSafariなどで挙動がおかしくなることがある |
<span> や <div> に置き換える → <a><span>リンク</span></a>
|
▼コメントいただいた記事。わかりやすいので載せます
| 要素 | NGな使用例 | 違反の理由 | 推奨される代替方法（改善案） |
|---|---|---|---|
<ul> / <ol>
|
<ul><div>Item</div></ul> |
ul / ol の直下には li 要素のみ許可されている |
<ul><li>Item</li></ul> |
<table> |
<table><div>テキスト</div></table> |
table の中は tr / td / th などの表構造の要素のみが入れられる |
表の構造に合わせて <tr><td>テキスト</td></tr> にする |
<p> |
<p><div>テキスト</div></p> |
<p> は自動で閉じられる性質があり、ブロック要素（divなど）を入れると構造が崩れる |
div を外に出す → <div><p>テキスト</p></div>
|
<label> |
<label><div>項目</div></label> |
label の中に div や p などブロック要素を直接入れるのは非推奨 |
label の中に span を使う or label を for 属性で外に出す |
<button> |
<button><div>送信</div></button> |
button 内にブロック要素（divなど）を入れるとブラウザによっては誤作動 |
span や strong などのインライン要素を使う |
<form> |
<form><form>...</form></form> |
<form> の入れ子は仕様違反。サーバーに正しくデータが送信されない |
フォームを分ける or JavaScriptなどで疑似的に対応する |
<section> / <article>
|
無意味にネストして使う → <section><section>...</section></section>
|
過剰な入れ子で意味構造が不明確に。SEOやアクセシビリティに影響 | 意味ごとに section や div を使い分ける |
<img> |
<img><p>説明</p> |
<img> は空要素（自己終了タグ）なので中に要素を入れるのは不可 |
figcaption を使う：<figure><img><figcaption>説明</figcaption></figure>
|
ちょっとした覚え方ヒント
- ブロック要素をインライン要素の中に入れない（特に
<a>・<button>・<label>） - リスト・テーブル・フォームなど、構造が決まっている要素はルール厳守
- 「自己終了タグ」は中に子要素を持てない（例：
<img>, <input>）
🔧 補足：iOS Safariと「見えてるのに反応しない」系の罠
Safari/iOSは以下のような場合にタップイベントが効かなくなる・反応が遅れることがあります。
| 状態 | 起こりやすい問題 |
|---|---|
opacity: 0 |
表示された直後はタップが効かない |
transform 付き要素 |
タップ対象レイヤーがズレることがある |
display: none → 表示 |
タップ可能状態になるまでにラグがある |
| アニメーション途中 | タップが無効または反応が遅れる |
解決策：touchstart,ontouchstartを追加してみる！