HTMLバリデーション — 正しい構文とよくあるエラー - HTML入門 — Webページの構造とタグのチートシート

HTMLは多少の間違いがあってもブラウザが補正して表示してくれることがあります。しかし、表示されるから正しいとは限りません。構文エラーは、CSSの効き方、JavaScriptのDOM操作、アクセシビリティに影響します。

よくあるHTMLエラー

HTMLは「ブラウザで表示された」だけで合格にせず、構文として正しいかも確認します。

HTML要素は、開始タグと終了タグの対応が崩れないように入れ子にします。

<!-- 良い例 -->
<p><strong>重要なお知らせ</strong>があります。</p>

html

<!-- 悪い例 -->
<p><strong>重要なお知らせ</p></strong>

html

id はページ内で一意、class は複数要素に使えます。

属性	用途	重複
`id`	1つの要素を特定する	同じページ内で重複させない
`class`	スタイルや分類を共有する	複数要素に使える

<section id="profile" class="section">
  <h2>プロフィール</h2>
</section>
 
<section id="skills" class="section">
  <h2>スキル</h2>
</section>

html

HTMLの構文チェックには、W3CのMarkup Validation Serviceなどを使えます。

https://validator.w3.org/

学習中は、エラーが出たらすぐ直すより、まず「何を指摘されているか」を読みます。閉じタグ、要素の入れ子、属性名のミスは頻出です。

次章では、ここまでの知識を引ける形でまとめたHTMLチートシートを用意します。