HTML
🔥 リスト要素が正しくネストされない
ul/olの直下にli以外の要素がある
😰 こんな症状
ul/olの直下にli以外の要素を置いてレイアウトが崩れる。リスト構造を正しく書けていないときに起きるよ。
🔍 原因
HTMLの仕様では<ul>や<ol>の直接の子要素は<li>のみ許可されているよ。<ul>の直下に<div>や<p>を置いたり、<li>の外にテキストを書いたりすると、ブラウザが構造を正しく解釈できずレイアウトが崩れるんだ。
❌ エラーが起きるコード
<ul><li>A<li>B</ul>
<!-- li 閉じタグなし -->✅ 直し方
1. <ul>/<ol>の直下には<li>のみ配置する。 2. リスト内に追加コンテンツが必要なら<li>の中に入れる。 3. ネストしたリスト（入れ子リスト）は<li>の中に<ul>/<ol>を入れる。 4. HTMLバリデーターで構造エラーがないか確認する。
✅ 修正後のコード
<ul><li>A</li><li>B</li></ul>この解決法は役立ちましたか？
🔗 関連するエラー
- テーブルの表示が崩れる — tr/td の入れ子が間違っている
- 画像が表示されない — 画像パスが間違っている
- ページのレイアウトが崩れる — タグの閉じ忘れ
- リンクをクリックしても何も起きない — href 属性の書き忘れ
- 文字化けする — charset の指定がない
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説