HTML-Tags verschachteln

Die korrekte Verschachtelung von HTML-Tags verhindert HTML-Fehler

Wenn Sie sich den HTML-Code ansehen Auszeichnung Heute werden Sie auf jeder Webseite HTML-Elemente sehen, die in anderen HTML-Elementen enthalten sind. Diese Elemente, die sich „innerhalb“ anderer Elemente befinden, werden als bezeichnet verschachtelte Elemente , und sie sind heute für den Aufbau jeder Webseite unerlässlich.

Was bedeutet es, HTML-Tags zu verschachteln?

Der einfachste Weg, die Verschachtelung zu verstehen, ist, an etwas zu denken HTML-Tags als Boxen, die Ihren Inhalt enthalten. Ihre Inhalte können Text, Bilder und verwandte Medien umfassen. HTML-Tags sind die Kästchen um den Inhalt. Manchmal müssen Sie Kisten in andere Kisten legen. Diese „inneren“ Boxen sind in anderen verschachtelt.

Wenn Sie einen Textblock innerhalb eines Absatzes fett formatieren möchten, haben Sie zwei HTML-Elemente sowie der Text selbst.

|_+_|

Diesen Text verwenden wir als unser Beispiel. So würde es in HTML geschrieben werden:

|_+_|

Beispiel: Dies ist ein Textsatz.

Das Wort zu machen Satz fett, fügen Sie öffnende und schließende Tags vor und nach diesem Wort hinzu.

|_+_|

Beispiel: Das ist ein Satz von Text.

Wie Sie sehen können, haben wir ein Kästchen (den Absatz), das den Inhalt des Satzes enthält, sowie ein zweites Kästchen (die stark Tag-Paar), wodurch dieses Wort fett dargestellt wird.

Wenn Sie Tags verschachteln, schließen Sie die Tags in der umgekehrten Reihenfolge, in der Sie sie geöffnet haben. Du öffnest die

zuerst, gefolgt von der , was bedeutet, dass Sie das umkehren und die schließen und dann die

Eine andere Möglichkeit, darüber nachzudenken, besteht darin, wieder die Analogie von Boxen zu verwenden. Wenn Sie eine Box in eine andere Box stellen, müssen Sie die innere Box schließen, bevor Sie die äußere oder enthaltende Box schließen können.

Weitere verschachtelte Tags hinzufügen

Was ist, wenn Sie nur ein oder zwei Wörter haben möchten? fett und ein weiterer Satz kursiv ? Hier ist, wie das geht.

|_+_|

Beispiel: Das ist ein Satz von Text und es hat auch einige kursiv geschriebener Text zu.

Sie können sehen, dass unsere äußere Box, die

, enthält jetzt zwei verschachtelte Tags – die und die . Sie müssen beide geschlossen werden, bevor die enthaltende Box geschlossen werden kann.

|_+_|

Beispiel: Das ist ein Satz von Text und es hat auch einige kursiv geschriebener Text zu.

Dies ist ein weiterer Absatz.

In diesem Fall haben wir Kisten in Kisten! Die äußerste Box ist die

oder ein Aufteilung . In dieser Box befinden sich zwei verschachtelte Absatz-Tags , und innerhalb des ersten Absatzes haben wir einen nächsten und Tag-Paar.

Warum sollten Sie sich für die Verschachtelung interessieren?

Der Hauptgrund, warum Sie sich um die Verschachtelung kümmern sollten, ist die Verwendung von CSS. Cascading Style Sheets Verlassen Sie sich darauf, dass Tags innerhalb des Dokuments konsistent verschachtelt sind, damit es erkennen kann, wo Stile beginnen und enden. Eine falsche Verschachtelung erschwert es dem Browser, zu erkennen, wo er diese Stile anwenden soll. Schauen wir uns etwas HTML an:

|_+_|

Beispiel: Das ist ein Satz von Text und es hat auch einige kursiv geschriebener Text zu.

Das istein weiterer Absatz.

Unter Verwendung des obigen Beispiels, wenn wir a schreiben wollten CSS-Stil das den Link innerhalb dieser Abteilung beeinflussen würde, und nur dieser Link (im Gegensatz zu allen anderen Links in anderen Abschnitten der Seite), wir müssten die Verschachtelung verwenden, um diesen Stil als solchen zu schreiben:

|_+_|

Andere Überlegungen

Zugänglichkeit und Browserkompatibilität sind ebenfalls wichtig. Wenn Ihr HTML falsch verschachtelt ist, ist es für Screenreader und ältere Browser nicht so gut zugänglich – und es könnte sogar das visuelle Erscheinungsbild einer Seite beeinträchtigen, wenn die Browser nicht herausfinden können, wie eine Seite richtig wiedergegeben wird, weil HTML-Elemente und -Tags sind fehl am Platz.

Wenn Sie danach streben, vollständig korrektes und gültiges HTML zu schreiben, müssen Sie die richtige Verschachtelung verwenden. Andernfalls wird jeder Validator Ihr HTML als fehlerhaft kennzeichnen.