【プログラミング】HTMLでリストの入れ子(ネスト)を作る時に注意すること

HTMLを勉強していて、リストの書き方に疑問を持ったことはありませんか？

普通の連番付きリストや連番なしのリスト（ｌｉ）のマークアップの方法はきちっと理解できました。

でも、リスト（ｌｉ）の中に入れ子（ネスト）状態のリスト（ｌｉ）をマークアップする方法がボクの理解と違っていたので忘れないように詳細を書きます。

HTMLでリストの入れ子(ネスト)を作る時に注意すること

インターネット上のスクールでプログラミング学習で課題が出されました。

今まで学んできて初めての課題です。

メモを見ながら苦労して回答を完成させて満足していました。

ブラウザ上での確認は回答と同じだったので「合ってた」と安心していましたが、念のために回答の動画を確認したら自分が出した答えと回答が違っていました。

[quads id=5]

課題

下の図が課題です。このブラウザで表示されている通りにマークアップします。

この課題のポイントは、リスト内にリストがある部分のマークアップです。

＜ｈ1＞タグでタイトルを記述して、＜ｈ2＞タグで見出しを作りその下にリストを作る 簡単なマークアップです。

▼次がボクがマークアップしたHTMLです。

赤枠内の<ul></ul>タグで囲ってある部分が、ボクの理解と違っているところです。

▼次が回答です。

プログラミング学習で学んだ通り順を追って、マークアップしましたが、回答とは違うじゃないですか！

HTMLのマークアップは綺麗・汚いが書く人によって様々だと言うことなので、ボクが書いたマークアップは汚い部類のマークアップであって、間違ってはないんだろうと思いました。

でも、念のために調べた所なんと！リストのマークアップには行ってはダメな方法をボクが書いていまいした。

それは、リストをネスト（入れ子）状態にする時は、以下の注意が必要だと知りました。

オススメ記事プログラミングを独学したときの記録を残しています。
＞＞【プログラミング】初心者が独学した記録がこれだ！

【プログラミング】初心者が独学した記録がこれだ！そろそろバイトでも探すか？ バイトで働きながら、ブログを書こうかとも考えていた時にあるブログを発見した。 このブログのお陰で...

[quads id=1]

まとめ

入れ子（ネスト）状にする時は、<li>内に<ul> <ol>を入れると決まっていました。

＜ｕｌ＞、＜ｏｌ＞要素内に入れ子にする場合は、＜ｕｌ＞、＜ｏｌ＞要素を直接入れずに、＜ｌｉ＞要素の中に入れることです。

ボクはリストをネスト（入れ子）状態にするのは、リスト内にリストを追加の記述をすればいいと思って、ul要素内にol要素を記述してしまいました。

ブラウザ上では問題が無くても、HTMLが違っている事があることを知りました。知らずにこのままの状態だったら今後心配です。慎重にプログラミング学習をします。

バズビー

ブロガー

TwitterContact

人生を歩むために役に立つ情報をシェアします。
時々、芸能人のことも書いてます。