Om du tittar på HTML pålägg för alla webbsidor idag ser du HTML-element som finns i andra HTML-element. Dessa element som är "inuti" andra element kallas kapslade element, och de är väsentliga för att skapa en webbsida idag.
Vad betyder det att Nest HTML-taggar?
Det enklaste sättet att förstå häckning är att tänka på HTML-taggar som rutor som innehåller ditt innehåll. Ditt innehåll kan innehålla text, bilder och relaterade media. HTML-taggar är rutorna runt innehållet. Ibland måste du placera lådor i andra lådor. Dessa "inre" lådor är kapslade inuti andra.
Om du har ett textblock som du vill ha fetstil i ett stycke har du två HTML-element såväl som själva texten.
Exempel: Detta är en texttext.
Den texten är vad vi kommer att använda som vårt exempel. Så här skulle det skrivas i HTML:
Exempel: Detta är en texttext.
Att göra ordet mening fetstil, lägg till in- och stängningstaggar före och efter det ordet.
Exempel: Detta är en mening av text.
Som du ser har vi en ruta (stycket) som innehåller innehållet i meningen, plus en andra ruta (
stark tag-par), vilket gör ordet som fetstil.När du häckar taggar stänger du taggarna i motsatt ordning som du öppnade dem. Du öppnar
först, följt av , vilket innebär att du vänder om det och stänger och sedan.
Ett annat sätt att tänka på detta är att återigen använda analogin med lådor. Om du placerar en låda i en annan låda måste du stänga den inre innan du kan stänga den yttre eller innehållande lådan.
Lägga till fler kapslade taggar
Vad händer om du bara vill ha ett eller två ord fet, och en annan uppsättning för att vara kursiv? Så här gör du.
Exempel: Detta är en mening text och det har också en del kursiv text för.
Du kan se att vår yttre låda, den
, har nu två kapslade taggar inuti den och den . De måste båda vara stängda innan den innehållande lådan kan stängas.
Exempel: Detta är en mening text och det har också en del kursiv text för.
Detta är ett annat stycke.
I det här fallet har vi lådor inuti lådor! Den yttersta rutan är
eller a. division. Inuti den lådan finns ett par kapslade. stycke taggar, och inuti första stycket har vi ett nästa. och taggpar.Varför ska du bry dig om häckning
Den främsta anledningen till att du bör bry dig om häckning är om du ska använda CSS. Cascading Style Sheets förlita sig på att taggar ska vara konsekvent kapslade i dokumentet så att det kan se var stilar börjar och slutar. Felaktig kapsling gör det svårt för webbläsaren att veta var de ska användas. Låt oss titta på lite HTML:
Exempel: Detta är en mening text och det har också en del kursiv text för.
Detta är ett annat stycke.
Med hjälp av exemplet ovan, om vi ville skriva en CSS-stil som skulle påverka länken i denna division, och endast den länken (i motsats till andra länkar i andra delar av sidan), skulle vi behöva använda kapslingen för att skriva den här stilen:
.main-content a {
färg: # F00;
}
Andra överväganden
Tillgänglighet och webbläsarkompatibilitet spelar också roll. Om din HTML är felaktigt kapslad är den inte lika tillgänglig för skärmläsare och äldre webbläsare - och den kan till och med helt bryta en visuell utseende på en sida om webbläsarna inte kan ta reda på hur en sida ska ordnas ordentligt eftersom HTML-element och taggar är slut plats.
Slutligen, om du strävar efter att skriva helt korrekt och giltig HTML, måste du använda rätt kapsling. Annars kommer varje validerare att flagga din HTML som felaktig.