正しい構文でHTMLを記載しないと、検索エンジンやブラウザがページを正しく解釈できないかもしれません。
そのため、正しくHTMLが書けているか、チェックを行うことを推奨します。
検証サービスもあり、W3CのMarkup Validation Serviceが有名です。
https://validator.w3.org
W3C (World Wide Web Consortium) は、Web技術の標準化を推進する非営利団体です。
Web技術の標準化により、Webサイトやアプリケーションがさまざまなブラウザやデバイスで同じように動作するようにしています。
W3Cは、HTML、CSS、JavaScript、XML、MathMLなどのWeb技術の標準化を行っています。
VS Code拡張機能「W3C Web Validator」をインストールする
左サイドのアイコンで、積み木のようなものが「拡張機能」です。
「W3C Web Validator」で検索し、「インストール」をクリックしましょう。
「発行元を信頼＆インストール」をクリックします。
不正なHTMLを書いてみる
index.htmlの編集画面を開き、「英数」キーを押して半角英数の入力に切り替えましょう。
次に、! を入力すると「emmet省略記法」と表示されるので、そのままEnterキー（Tabキーでも可）で確定します。
HTMLの基本構文が表示されます。
9行目あたり、<body>と</body>の間に、「ul>ul>li」でemmet省略表記が出たら、Enterします。
ulタグの中に直接、ulタグは許可されていません。
ulタグの中に直接書けるのはliタグのみです。
liタグの中には、ulタグを書けます。
このように展開されます。
「emmet省略記法」が表示されない、または、消えてしまった場合は、半角英数になっているか確認し、最後の1文字を再入力してみます。
W3C Validationを実行して、構文チェックをする
エディタの左下に、「W3C Validation」という表示があるので、クリックしましょう。
チェック結果が右下に表示されます。2個目のulタグにも、赤い波線が表示されました。
10行目あたりのulタグ、12行目あたりのul閉じタグを削除後、再度「W3C Validation」をクリックして検証しましょう。エラーにならず、「This HTML file is Valid !」と出たら検証結果OKで、正しい構文で記載されていることがわかりました。
HTMLの整形
htmlを書いていて、ガタガタしてしまったり、空白がバラバラしたりして、見にくくなる場合があります。
そのようなときは、整形機能を利用するときれいになります。
設定を確認しましょう。
Code ＞ 基本設定 > 設定 を開きます。
Editor: Format On Save で検索すると、該当箇所の設定が表示されます。チェックされていることを確認します。
設定が有効な場合は、保存時に自動整形されます。
保存前の状態（ファイル名のタブに白い丸印があると未保存状態）：
保存後の状態（白い丸印が消え、タグの位置がきれいになりました）：
きれいなHTMLを書くために大事な知識ですので、マスターしましょう
