Als je kijkt naar de HTML opmaak voor elke webpagina van vandaag ziet u HTML-elementen in andere HTML-elementen. Deze elementen die "binnen" van andere elementen zijn, staan bekend als geneste elementen, en ze zijn essentieel voor het bouwen van elke webpagina van vandaag.
Wat betekent het om HTML-tags te nesten?
De gemakkelijkste manier om nesten te begrijpen, is door te denken aan: HTML-tags als dozen die uw inhoud bevatten. Uw inhoud kan tekst, afbeeldingen en gerelateerde media bevatten. HTML-tags zijn de vakken rond de inhoud. Soms moet je dozen in andere dozen plaatsen. Die "binnenste" dozen zijn genest in andere.
Als je een tekstblok hebt dat je vetgedrukt wilt hebben in een alinea, heb je er twee HTML-elementen evenals de tekst zelf.
Voorbeeld: Dit is een tekstzin.
Die tekst zullen we als ons voorbeeld gebruiken. Hier is hoe het in HTML zou worden geschreven:
Voorbeeld: Dit is een tekstzin.
Om het woord te maken zin vetgedrukt, voeg openings- en sluitingstags toe voor en na dat woord.
Voorbeeld: Dit is een zin van tekst.
Zoals je kunt zien, hebben we één vak (de alinea) die de inhoud van de zin bevat, plus een tweede vak (de sterk tagpaar), waardoor dat woord vetgedrukt wordt.
Wanneer u tags nest, sluit u de tags in de omgekeerde volgorde waarin u ze hebt geopend. Je opent de
eerst, gevolgd door de , wat betekent dat je dat omdraait en de. sluit en dan de.
Een andere manier om hierover na te denken, is door nogmaals de analogie van dozen te gebruiken. Als je een doos in een andere doos plaatst, moet je de binnenste sluiten voordat je de buitenste of de container kunt sluiten.
Meer geneste tags toevoegen
Wat als je maar één of twee woorden wilt hebben? vet, en een andere set om cursief te zijn? Hier is hoe dat te doen.
Voorbeeld: Dit is een zin van tekst en het heeft ook wat cursieve tekst te.
Je kunt zien dat onze buitenste doos, de
, heeft nu twee geneste tags erin: de en de . Ze moeten allebei worden gesloten voordat die doos kan worden gesloten.
Voorbeeld: Dit is een zin van tekst en het heeft ook wat cursieve tekst te.
Dit is een andere alinea.
In dit geval hebben we dozen in dozen! De buitenste doos is de
of een. divisie. In die doos zijn een paar genest. alinea-tags, en in de eerste alinea hebben we een volgende. en label paar.Waarom zou je om nesten geven?
De nummer 1 reden waarom u zich druk moet maken over nesten, is of u CSS gaat gebruiken. Trapsgewijze stijlbladen vertrouw erop dat tags consistent in het document worden genest, zodat het kan zien waar stijlen beginnen en eindigen. Onjuiste nesting maakt het moeilijk voor de browser om te weten waar deze stijlen moeten worden toegepast. Laten we eens kijken naar wat HTML:
Voorbeeld: Dit is een zin van tekst en het heeft ook wat cursieve tekst te.
Dit is een andere paragraaf.
Als we het bovenstaande voorbeeld gebruiken, als we a. willen schrijven CSS-stijl dat zou de link binnen deze divisie beïnvloeden, en alleen die link (in tegenstelling tot andere links in andere secties van de pagina), zouden we de nesting moeten gebruiken om deze stijl als zodanig te schrijven:
.main-content een {
kleur: #F00;
}
Andere Overwegingen
Toegankelijkheid en browsercompatibiliteit zijn ook van belang. Als uw HTML onjuist is genest, is deze niet zo toegankelijk voor schermlezers en oudere browsers, en kan zelfs de visuele weergave van een pagina als de browsers niet kunnen achterhalen hoe een pagina correct moet worden weergegeven omdat HTML-elementen en -tags niet werken plaats.
Ten slotte, als u ernaar streeft om volledig correcte en geldige HTML te schrijven, moet u correct nesten gebruiken. Anders zal elke validator uw HTML als onjuist markeren.