Wenn Sie sich den HTML-Code ansehen Markup Für jede Webseite werden heute HTML-Elemente in anderen HTML-Elementen angezeigt. Diese Elemente, die "innerhalb" anderer Elemente sind, 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 HTML-Tags als Boxen, die Ihren Inhalt enthalten. Ihr Inhalt kann Text, Bilder und verwandte Medien enthalten. HTML-Tags sind die Kästchen um den Inhalt. Manchmal müssen Sie Boxen in andere Boxen legen. Diese "inneren" Boxen sind in andere eingebettet.
Wenn Sie einen Textblock haben, den Sie in einem Absatz fett formatieren möchten, haben Sie zwei HTML-Elemente sowie der Text selbst.
Beispiel: Dies ist ein Textsatz.
Dieser Text ist das, was wir als unser Beispiel verwenden werden. So würde es in HTML geschrieben:
Beispiel: Dies ist ein Textsatz.
Um das Wort zu machen Satz fett, fügen Sie öffnende und schließende Tags vor und nach diesem Wort hinzu.
Beispiel: Dies ist a Satz des Textes.
Wie Sie sehen können, haben wir ein Kästchen (den Absatz), das den Inhalt des Satzes enthält, plus ein zweites Kästchen (das stark Tag-Paar), wodurch dieses Wort fett dargestellt wird.
Schließen Sie beim Verschachteln von Tags die Tags in umgekehrter Reihenfolge, in der Sie sie geöffnet haben. Du öffnest die
zuerst, gefolgt von der , was bedeutet, dass Sie das umkehren und das schließen und dann die.
Eine andere Möglichkeit, darüber nachzudenken, besteht darin, wieder die Analogie der Boxen zu verwenden. Wenn Sie eine Box in eine andere Box stellen, müssen Sie die innere 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: Dies ist a Satz von Text und es hat auch einige kursiver Text auch.
Sie können sehen, dass unsere Umverpackung, die
, enthält jetzt zwei verschachtelte Tags – die und der . Sie müssen beide geschlossen werden, bevor die enthaltende Box geschlossen werden kann.
Beispiel: Dies ist a Satz von Text und es hat auch einige kursiver Text auch.
Dies ist ein weiterer Absatz.
In diesem Fall haben wir Boxen in Boxen! Die äußerste Box ist die
oder ein. Einteilung. In dieser Box befinden sich zwei verschachtelte. Absatz-Tags, und im ersten Absatz haben wir einen nächsten. und Tag-Paar.Warum sollten Sie sich für das Verschachteln interessieren?
Der Hauptgrund, warum Sie sich um die Verschachtelung kümmern sollten, ist die Verwendung von CSS. Cascading Style Sheets verlassen sich darauf, dass Tags konsistent im Dokument verschachtelt sind, damit es erkennen kann, wo Stile beginnen und enden. Durch eine falsche Verschachtelung kann der Browser nur schwer erkennen, wo diese Stile angewendet werden sollen. Schauen wir uns etwas HTML an:
Beispiel: Dies ist a Satz von Text und es hat auch einige kursiver Text auch.
Das ist noch ein Absatz.
Mit dem obigen Beispiel, wenn wir a schreiben wollten CSS-Stil das würde sich auf den Link innerhalb dieser Abteilung auswirken, und nur diesen Link (im Gegensatz zu anderen Links in anderen Abschnitten der Seite) müssten wir die Verschachtelung verwenden, um diesen Stil als solchen zu schreiben:
.Hauptinhalt a {
Farbe: #F00;
}
Andere Überlegungen
Zugänglichkeit und Browserkompatibilität sind ebenfalls wichtig. Wenn Ihr HTML-Code falsch verschachtelt ist, ist er für Screenreader und ältere Browser nicht mehr so zugänglich – und könnte sogar vollständig kaputt gehen visuelles Erscheinungsbild einer Seite, wenn die Browser nicht herausfinden können, wie eine Seite richtig dargestellt wird, weil HTML-Elemente und -Tags nicht mehr verfügbar sind Platz.
Schließlich, wenn Sie versuchen, vollständig korrekten und gültigen HTML-Code zu schreiben, müssen Sie eine korrekte Verschachtelung verwenden. Andernfalls wird jeder Validator Ihren HTML-Code als falsch kennzeichnen.