メインコンテンツまでスキップ

よくあるミス HTML編

この章では、HTMLを書くときによくあるミスを紹介します。

タグの閉じ忘れ​

HTMLでは、開始タグと終了タグを正しく書く必要があります。例えば、<div>と書いた場合、対応する終了タグである</div>を忘れてしまうことがあります。これにより、ブラウザが正しくHTMLを解釈できなくなり、レイアウトが崩れることがあります。

解決方法​

VSCodeではShift + Alt + Fを押すと、コードを自動で整形してくれるため、タグの閉じ忘れを防ぐことができます。

タグの入れ子のミス​

HTMLでは、タグを入れ子にすることができますが、入れ子の順序を間違えると、ブラウザが正しくHTMLを解釈できなくなります。例えば、<p><div></p></div>のように書いてしまうと、ブラウザはどのタグがどのタグの子要素なのかを正しく理解できなくなります。

スペルミス​

HTMLのタグや属性には、スペルミスがあるとブラウザが正しく解釈できなくなります。例えば、

<!-- onclickのスペルミス -->
<button onclck="myFunction()"></button>

と書いてしまうと、ブラウザはonclickタグを認識できず、フォームが正しく表示されないことがあります。

解決方法​

ボタン要素の場合は、クリック取得をJSに任せてあげることで解決することもできます。 ほかの要素の場合は、予測変換が出るかどうかという一定の基準で判定する方法もあります。ただし、補完が出ないオプションの場合もあるため、スペルミスを完全に防ぐことはできません。スペルミスを防ぐためには、コードを書くときに注意深く確認することが重要です。

JSが思うように動かない​

HTMLとJSを組み合わせることでいろいろな操作をすることができますが、連携のscriptタグの書き方を間違えると、JSが思うように動かないことがあります。例えば、<script src="script.js"></script>と書く場所を<head>の中に書いてしまうと、ブラウザがHTMLを読み込む前にJSを読み込んでしまうため、JSが正しく動作しないことがあります。

解決方法​

<script src="script.js"></script>は、<body>の最後に書くようにしましょう。これにより、ブラウザがHTMLを読み込んだ後にJSを読み込むため、JSが正しく動作するようになります。

作成:2026-06-15 YGMS_yukkuri