今日のWebページのHTMLマークアップを見ると、他のHTML要素にHTML要素が含まれていることがわかります。他の要素の「内側」にあるこれらの要素は、「入れ子要素」として知られており、今日のWebページを構築する上で不可欠です。
HTMLタグをネストするのはどういう意味ですか?
ネストを理解する最も簡単な方法は、HTMLタグをコンテンツを保持するボックスと考えることです。あなたのコンテンツは、テキスト、イメージなどを含むことができます。HTMLタグは、コンテンツの周りのボックスです。場合によっては、他のボックスの中にボックスを配置する必要があります。これらの「内部」ボックスは、他のものの中に入れ子になっています。
段落の中に太字で表示するテキストブロックがある場合は、テキスト自体と同様に2つのHTML要素があります。
例:これは 文 テキストの
そのテキストは、私たちが例として使用するものです。ここにそれが書かれる方法があります。
例:これはテキストの文章です。 「文章」という単語を太字にしたいので、その単語の前後に太字の前後のタグを追加します。
例:これは 文 テキストの ご覧のように、文章の内容/テキストと、その単語を太字にする2番目のボックス(強いタグペア)を含む1つのボックス(段落)があります。 タグをネストするときは、タグを開いたときと逆の順序でタグを閉じることが非常に重要です。あなたは 最初に、次に これはあなたがそれを逆転させて そして、 これについて考えるもう一つの方法は、箱の類推をもう一度使うことです。ボックスを別のボックスの中に配置する場合は、内側または閉じているボックスを閉じる前に内側のボックスを閉じなければなりません。 1つまたは2つの単語を太字にし、別の単語をイタリックにするだけの場合はどうなりますか?これを行う方法は次のとおりです。 例:これは 文 テキストの一部である イタリック体のテキスト あまりにも。 私たちの外側のボックス、 内部に2つのネストされたタグがあります そしてその 。それらを含むボックスを閉じることができる前に、両方を閉じなければなりません。 例:これは 文 テキストの一部である イタリック体のテキスト あまりにも。 これは別の段落です。 この場合、ボックスの中にボックスがあります!一番のボックスは 入れ子に気を付けるべき第1の理由は、CSSを使用する場合です。カスケーディングスタイルシートは、スタイルの開始位置と終了位置を識別できるように、タグ内に一貫してネストされるタグに依存しています。ページ上に「main-content」クラスのテキストを含む部門の内部にあるすべての「リンク」に影響するスタイルを設定すると、不適切な入れ子により、ブラウザがこれらのスタイルを適用する場所を知ることが難しくなります。いくつかのHTMLを見てみましょう: 例:これは 文 テキストの一部である イタリック体のテキスト あまりにも。 これは別の段落です。 例を使用して、私は、この部門内のリンクに影響を与えるCSSスタイルと、そのリンクのみ(ページの他のセクションの他のリンクとは対照的)を書きたいと思ったら、私のスタイルを書くために入れ子にしています。 .main-content { 色:#F00;}
その他の理由には、アクセシビリティとブラウザの互換性があります。 HTMLが誤ってネストされていると、スクリーンリーダーや古いブラウザからアクセスできなくなります.HTML要素やタグがあるためブラウザがページを適切にレンダリングする方法を見つけられない場合、ページの外観を完全に壊すことさえありますはずれている。 最後に、正当で正当なHTMLを書くために努力しているなら、正しい入れ子を使う必要があります。それ以外の場合、すべてのバリデータはあなたのHTMLに間違ったものとしてフラグを付けます。 より多くのネストされたタグの追加
ネスティングについて気にしなければならない理由