HTML タグのネスト

HTML タグを正しくネストすることで、HTML エラーを防ぐことができます

HTMLを見てみると マークアップ 今日のどの Web ページでも、HTML 要素が他の HTML 要素内に含まれていることがわかります。他の要素の「内側」にあるこれらの要素は、 ネストされた要素 、そしてそれらは今日のウェブページを構築するために不可欠です.

HTML タグをネストするとはどういう意味ですか?

ネストを理解する最も簡単な方法は、 HTML タグ コンテンツを保持するボックスとして。コンテンツには、テキスト、画像、および関連するメディアを含めることができます。 HTML タグは、コンテンツを囲むボックスです。場合によっては、ボックスを他のボックスの中に配置する必要があります。これらの「内側」のボックスは、他のボックスの内側にネストされています。

段落内に太字にしたいテキストのブロックがある場合、2 つになります。 HTML 要素 テキスト自体も同様です。

|_+_|

そのテキストを例として使用します。これを HTML で記述すると次のようになります。

|_+_|

例: これはテキストの文です。

言葉にするために 文 太字にし、その単語の前後に開始タグと終了タグを追加します。

|_+_|

例: これは 文 テキストの。

ご覧のとおり、文の内容を含む 1 つのボックス (段落) と、2 つ目のボックス (段落) があります。 強い タグ ペア)、その単語を太字で表示します。

タグをネストする場合は、開いたときと逆の順序でタグを閉じます。あなたは

最初に、続いて 、つまり、それを逆にして閉じます そして、

これについて考える別の方法は、もう一度箱のアナロジーを使用することです。ボックスを別のボックス内に配置する場合、外側のボックスまたは含まれているボックスを閉じる前に、内側のボックスを閉じる必要があります。

ネストされたタグを追加する

1 つまたは 2 つの単語だけにしたい場合はどうすればよいでしょうか 太字、別のセットを斜体にする ?その方法は次のとおりです。

|_+_|

例: これは 文 テキストの一部であり、いくつかの 斜体のテキスト それも。

私たちの外箱、

には、その中に 2 つのネストされたタグがあります。 そしてその .含まれているボックスを閉じる前に、両方を閉じる必要があります。

|_+_|

例: これは 文 テキストの一部であり、いくつかの 斜体のテキスト それも。

これは別の段落です。

この場合、ボックスの中にボックスがあります。一番外側の箱は

または 分割 .その箱の中には、ネストされたペアがあります 段落タグ 、そして最初の段落の中に次の段落があります と タグペア。

ネスティングを気にする必要がある理由

ネストに注意する必要がある一番の理由は、CSS を使用する場合です。 カスケード スタイル シート スタイルの開始位置と終了位置を判別できるように、ドキュメント内で一貫して入れ子になっているタグに依存します。不適切なネストがあると、ブラウザーがこれらのスタイルを適用する場所を認識するのが難しくなります。 HTML をいくつか見てみましょう。

|_+_|

例: これは 文 テキストの一部であり、いくつかの 斜体のテキスト それも。

これは別の段落.

上記の例を使用して、 CSS スタイル それがこの部門内のリンクに影響し、そのリンクのみに影響を与える場合 (ページの他のセクションの他のリンクとは対照的に)、ネストを使用してこのスタイルを記述する必要があります。

|_+_|

その他の考慮事項

アクセシビリティとブラウザーの互換性も重要です。 HTML が正しくネストされていない場合、スクリーン リーダーや古いブラウザーはアクセスしにくくなります。また、HTML 要素とタグが原因でページを適切にレンダリングする方法をブラウザーが認識できない場合、ページの外観が完全に損なわれることさえあります。場違いです。

最後に、完全に正しく有効な HTML を書きたい場合は、正しいネストを使用する必要があります。そうしないと、すべてのバリデーターがあなたの HTML を間違っているとフラグを立てます。