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

HTMLでリストの入れ子(ネスト)で失敗した!

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

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

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

Sponsored Link

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

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

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

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

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

課題

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

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

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

<h1>タグでタイトルを記述して、<h2>タグで見出しを作りその下にリストを作る 簡単なマークアップです。

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

HTMLでリストの入れ子(ネスト)で失敗した!

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

▼次が回答です。

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

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

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

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

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

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

バイトとブログの両立を考えていた時にあるブログを発見した。 このブログのお陰で、自分の新しい道が見えてきた気がした。 そのブログを読んで学び始めた事を忘れないように、自分のブログにまとめた。 プログラミングの事に興味がある人もに読んで欲しい。
Sponsored Link

まとめ

ul要素とol要素に子要素として入れられるのはli要素だけ

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

正しい誤り
<ul>、<ol>
<li>
<ul>、<ol>
<ul>、<ol>
<ul>、<ol>

<ul>、<ol>要素内に入れ子にする場合は、<ul>、<ol>要素を直接入れずに、<li>要素の中に入れることです。

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

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

スポンサードサーチ

シェアする

  • このエントリーをはてなブックマークに追加

フォローする