【第19回】よくあるHTMLエラーと対処法｜HTML初心者ノート

🚨 HTMLエラーってなに？

HTMLは「タグで囲むルール」が守られていないと、思った通りに表示されません。
多くの場合は 小さな書き間違い が原因です。

🔖 よくあるエラーと原因

エラー内容	原因	対処法
タグが閉じられていない	<p> を書いたのに </p> を忘れた	閉じタグを必ず書く
全角の < や > を使っている	日本語入力のまま入力した	半角に直す
属性に全角スペース	<img src= " test.jpg">	半角スペースで書き直す
ダブルクォーテーション忘れ	<img src=test.jpg>	src="test.jpg" のように必ず " " で囲む
入れ子の順序が逆	<p><span>テキスト</p></span>	<p><span>テキスト</span></p> のように順序を守る

✏️ エラーの例と直し方

例1：タグを閉じ忘れた場合

<p>こんにちは、みかおばです！
<p>HTMLを勉強中です。</p>

👇 表示結果：

「こんにちは、みかおばです！」が改行されずに続いて表示される

---

✅修正版

<p>こんにちは、みかおばです！</p>
<p>HTMLを勉強中です。</p>

👇 表示結果：

こんにちは、みかおばです！
HTMLを勉強中です。

例2：全角/半角エラー

❌ エラーあり

＜p＞こんにちは＜/p＞

（全角の < > を使ってしまった）

👇 表示結果

そのまま「＜p＞こんにちは＜/p＞」と文字列が表示される

✅ 修正版

<p>こんにちは</p>

👇 表示結果

こんにちは

💡 補足
日本語入力のまま打つと「全角＜＞」になることが多いです。タグは必ず半角で書きましょう！

---

✅ ポイントまとめ

• タグは必ず 開く＋閉じる をセットで書く
• 半角/全角 の違いに注意
• 属性値は " " で囲むのが基本
• ネスト（入れ子）は 順序を守る

👉 エラーは誰でも経験するもの。焦らずチェックすれば必ず直せます！

---

HTMLやデザインに興味がある方に、おすすめリンクです👇

---

📌 次回予告

【第20回】HTMLタグ解説まとめ
→ これまで学んだタグを一覧にして見返せるインデックスページを作ります！

---

🔖 この回で出てきたタグ・属性

#pタグ #spanタグ #imgタグ #エラー対処 #HTML初心者ノート

---