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