プログラミング入門ナビ by Proglus（プログラス）

Categories: プログラミング入門

HTMLで初心者がやりがちなミスとその対処方法！困ったらとりあえずこれを確認しよう！

1 はじめに
- 1.1 動画解説
2 コード例と正しい表示結果
3 全角文字での書き間違い
4 全角スペースの混入
5 終了タグの/（スラッシュ）が無い
6 終了タグの書き忘れ
7 タグのスペルミス
8 ファイルの保存忘れ
9 まとめ
10 今すぐメルマガ登録！
11 動画でプログラミング入門をしよう

はじめに

プログラミングを始めたての時は、些細なミスでもつまずいてしまいますね。

慣れてくると「よくあるミス」がだんだんわかるようになり、何か問題が起きたらすぐに気付けるのですが、初心者の時は特に解決に時間がかかりがちです。

この記事では、特に初心者がやりがちなHTMLのミスとその対処方法を紹介します。

あなたの問題解決の時間短縮に少しでも役立てば幸いです。

動画解説

本記事の内容を動画でも解説しています。

コード例と正しい表示結果

まず最初に正しく書けている場合のコードと表示結果を見てみましょう。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>よくあるHTMLの記述間違い</title>
</head>
<body>
  <h1>はじめての段落</h1>
</body>
</html>

表示結果

見出しのみのシンプルなページですが、コードにミスがあるとうまく表示できません。

ミスをするとどんな結果になってしまうのか順番に見ていきましょう。

全角文字での書き間違い

HTMLのタグ（<〜>の部分）は全て半角英数字で記述する必要があります。

全角になっているとブラウザが正しくタグとして読み込めないので想定した通りの表示にならないことがあります。

例えば見出しを意味する<h1>〜</h1>の部分で、誤ってタグを全角で下記のように書いてしまうとどうなるでしょうか。

コード例（誤り）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>よくあるHTMLの記述間違い</title>
</head>
<body>
  ＜h１＞はじめての見出し＜／h１＞
</body>
</html>

表示例

タグがそのまま表示されてしまっていますね。また「はじめての見出し」が見出しとしての表示になっていません。

これは<h1>〜</h1>が全角で書かれてしまったためにブラウザが見出し部分と理解できずにタグごとそのまま表示した結果です。

タグを書く時はきちんと半角にしてから記述するようにしましょう。

全角スペースの混入

HTMLのタグ内にはスペースを入れることがあります。このスペースも先ほどと同様、半角でなければなりません。

間違えて全角スペースにするとどうなってしまうのでしょうか。

下記コードのように、文字セットを指定するmeta要素の中で全角スペースを入れてみましょう（4行目）。

コード例（誤り）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta　charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>よくあるHTMLの記述間違い</title>
</head>
<body>
  ＜h１＞はじめての見出し＜／h１＞
</body>
</html>

表示例（macOSのSafariにて）

ブラウザによっては正しく表示されることもありますが、この例のようにmacOSのSafariブラウザで開くと文字化けしてしまいます。

これは文字セットを指定する<meta>要素内で、半角スペースの代わりに本来使ってはいけない全角スペースが使用されたため、ブラウザが使用すべき文字セットを理解できないのが原因です。

日本語で記述された「はじめての見出し」は日本語に適した文字セットであるUTF-8を指定されなかったために文字化けしてしまいました。

このように、タグだけではなくその中で記述するスペースも全角にならないように注意しましょう。

終了タグの/（スラッシュ）が無い

HTMLの基本構文は開始タグ（例：<h1>）＋コンテンツ（例：はじめての見出し）＋終了タグ（例：</h1>となっています（例外もあります）。

この終了タグには/（スラッシュ）が必要ですが、初心者のうちはこれを忘れてしまうことが多いです。

例えば下記のようにtitle要素で終了タグのスラッシュを忘れてしまうとどうなるでしょうか。

コード例（誤り）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta　charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>よくあるHTMLの記述間違い<title>
</head>
<body>
  ＜h１＞はじめての見出し＜／h１＞
</body>
</html>

表示例

白紙になってしまいましたね。

その代わり、ブラウザのタブにカーソルを合わせるとタイトル部分が出るのですが、ここに</html>までの残りのコードが入っていることがわかります。

title要素の終了タグでスラッシュを書き忘れると、タイトル部分の終了をブラウザが認識できずに、最後までタイトルが続いていると解釈してしまうためこのようになった訳です。

たかがスラッシュなのですが、忘れると大変なことになってしまうので注意してください。

終了タグの書き忘れ

終了タグにスラッシュを書き忘れるとそれ以降のコード全てがタイトルだと認識され、本文が白紙になってしまうことがわかりました。

では、終了タグそのものを書き忘れるとどうなるのでしょうか。結果はスラッシュ忘れのケースと同様になります。

コード例（誤り）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta　charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>よくあるHTMLの記述間違い
</head>
<body>
  ＜h１＞はじめての見出し＜／h１＞
</body>
</html>

表示例

終了タグは要素によっては必要のない場合もあるので、ついうっかり必要なのに書き忘れてしまうことがあるかもしれません。

必要ないと思い込んでしまっている場合もあるので、表示がおかしいなと感じたら怪しい部分の終了タグについて改めて確認してみるのが良いでしょう。

タグのスペルミス

タグそのものをスペルミスしてしまうこともよくあります。

例えば<title>を<titla>と書いてしまうとどうなるでしょうか。

コード例（誤り）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta　charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <titla>よくあるHTMLの記述間違い</titla>
</head>
<body>
  ＜h１＞はじめての見出し＜／h１＞
</body>
</html>

表示例

タイトル部分も含めて本文エリアに表示されてしまいました。

スペルミスによりタイトルを意味する<title>タグが認識できなかったため、ブラウザが<titla>以降を全て本文として解釈してしまったためです。

特にVSCodeなど、便利なブラウザには開始タグを書くとその後ろに自動的に終了タグを記述してくれる機能がありますね。

この時、開始タグをスペルミスすると終了タグもスペルミスされた状態で入力されることがあるので気付きにくく、注意が必要です。