書き方を間違えたら

間違いは誰にでもあるものです。ではHTMLで書き間違いをするとどうなるのでしょうか？

いろいろな間違い

要素名の書き間違い

要素名（h1など）のつづりを間違えてしまい、無効なタグと判断された場合、無視されます。そのタグは無かったものとみなされ、要素の内容が単にそのまま画面に出力され、処理が続行します。

例えば下の例の場合であれば、<xyz>というタグは存在しないので無視され、単に「これはテスト」と表示されます。

<xyz>これはテスト</xyz>

これはテスト

期待した効果が現れない場合は、要素名の書き間違いに注意しましょう。

全角文字の入力

タグを全角文字で書いてしまった場合も、無効とみなされます。入力した全角のタグは、そのまま画面に表示されてしまいます（余分なものが画面に表示されるので、気づくかもしれません）。

<xyz>これはテスト＜／ｘｙｚ＞

これはテスト＜／ｘｙｚ＞

上の例では終了タグ</xyz>が全角文字で書かれた結果、そのまま画面に表示される様子がわかります。

その他、画面上に謎の ＜ や ＞ が表示される場合には注意が必要です。おそらく全角で書いたことが原因で、その周囲のタグが機能していないことでしょう。それ以降の表示にも影響が出て、乱れが発生するかも知れません。

半角に変換する
HTMLタグはすべて半角英数文字を使用しますが、特に日本語入力がＯＮの状態では全角文字が入力されるので、注意が必要です。Windowsの場合であれば、キーボードの「F10」キーを押すと、強制的に半角に変換できるので覚えておくと良いでしょう。

日本語入力がＯＮの時
＜／ｈ１＞ → F10キーを押す → </h1>

終了タグ忘れ

HTMLタグは「開始タグ」と「終了タグ」をセットで使うものが多いですが、「終了タグ」を忘れると、要素の始まりがあっても終わりが無い状態になります。

その結果、ページの最後まで（あるいは別のタグが効果を上書きするまで）指定の効果が適用されてしまいます。

<h1>第一章
本レポートでは近郊の水質検査について述べます。○月×日に近隣の河川で行われたCOD調査の結果を・・・

第一章本レポートでは近郊の水質検査について述べます。○月×日に近隣の河川で行われたCOD調査の結果を・・・

上の例では、見出し<h1>の終了タグ</h1>を忘れています。見出しの終了を示す指示が無いので、全て見出しと判断されたのです。(そして改行<br>も無いため、一行につながって表示されます)

文字の色や太さなどの設定が、想定以上の範囲に及ぶときは、おおむねこの「終了タグ忘れ」が原因です。

タグの効果範囲が「どこから」「どこまで」なのか、はっきり指定することが大事というわけです。

<>の閉じ忘れ

タグは「<」ではじまり「>」で終わるものですが、この「>」を忘れると、奇妙な結果が生じます。

<h1>第一章</h1
本レポートでは近郊の水質検査について述べます。○月×日に近隣の河川で行われたCOD調査の結果を・・・

第一章

上の例ではh1の終了タグ</h1>の「>」がありません。よって「</h1本レポートでは近郊の水質検査について・・・」という長いタグであると判断され、そのようなタグは無効なため、無視されました。

その結果「第一章」だけが画面に表示され、残りの文章は表示されることはありません。

特に<html>や<head>や<body>のような、ページの全体構造に影響するタグで上記のミスをすると、ページが全く表示されない真っ白な状態になることがあります。注意してください。

ページが何も表示されないと絶望してしまうかもしれませんが、案外１文字「>」が抜けているだけ、といった小さな問題であることがありますので、諦めないでください！😁

対策

HTMLは何か間違いがあっても、基本的にエラーメッセージなどは表示されません。 エラーが出ないことは良いことのように思えますが、間違いに気づきにくかったり、原因がわかりにくかったりとデメリットも大きいです。

そのため、以下のようなことに注意しましょう。

こまめに動作確認をしましょう。
- 少し編集したら結果を確かめるようにします。異常があったら、直前に編集した箇所に原因がありますので見直しましょう。キーボードのCtrl+Zを押して「元に戻す」のもありです。
- 一気に多くの編集をすると、異常があった時に、どこに原因があるのか特定しにくくなります。こまめに動作確認しましょう。
「開始タグ」を入力したら「終了タグ」をすぐ書きましょう。
- 終了タグでの閉じ忘れを防ぐために効果があります。また、複雑な入れ子構造でも間違えにくくなる意味あいもあります。
```
<h1>
    ↓
<h1></h1>
    ↓
<h1>第一章</h1>
```
  少し面倒に感じるかも知れませんが、確実な操作を行うには必要なテクニックです。
  なお、Atom や SublimeText といった一部のテキストエディタアプリを使用している場合は、自動的に終了タグを書いてくれる場合があります（日本語モードＯＦＦの場合）。
異常が発生した箇所に注意しましょう。
- HTMLは異常な部分を「無視」して無かったものと見なすので、間違いをすると画面に表示されなかったり、効果が無い事が多いです。
- HTMLは１行目から順番に下に向かって処理されます。そして異常な部分は無視して、処理を続行します。
- つまり何か異常な表示になっている物の周辺や、その一つ上の行あたりに問題が潜んでいることが多いです。あたりをつけて探してみましょう。
「切り取り」と「貼り付け」を使って、問題箇所を特定しましょう。
- 原因の場所が分からなくて、なんとなく怪しい箇所はあるけれど、どこが原因か分からない、不幸にもそのような状態になった時は、怪しい部分を「切り取り」と「貼り付け」で別の場所に移してしまってから、動作確認をしましょう。