Om du tittar på HTML-markupen för en webbsida idag ser du HTML-element som finns i andra HTML-element. Dessa element som är "insida" av andra är så kallade "kapslade element", och de är viktiga för att bygga en webbsida idag.
Vad betyder det för Nest HTML-taggar?
Det enklaste sättet att förstå nestning är att tänka på HTML-taggar som rutor som håller ditt innehåll. Ditt innehåll kan innehålla text, bilder etc. HTML-taggar är rutorna runt innehållet. Ibland måste du placera lådor inuti andra lådor. Dessa "inre" lådor är inbäddat inuti andra.
Om du har ett textblock som du vill ha fet i ett stycke har du två HTML-element och själva texten.
Exempel: Detta är a mening av text.
Den texten är vad vi ska använda som vårt exempel. Så här skulle det skrivas.
Exempel: Detta är en mening i texten. Eftersom du vill att ordet "sentence" ska vara fet, lägger du till att du öppnar och stänger fetstilkning före och efter det ordet.
Exempel: Detta är a mening av text. Som du kan se har vi en ruta (stycket) som innehåller innehållet / texten i vår mening plus en andra ruta (det starka taggparet), vilket gör det ordet så fet. När du näser taggar är det mycket viktigt att du stänger 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 än en gång använda lådans analogi. 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 rutan. Vad händer om du bara vill ha ett eller två ord att vara djärva, och en annan uppsättning att vara kursiv? Så här gör du det. Exempel: Detta är a mening av text och det har också lite kursiv text för. Du kan se att vår yttre låda, , har nu två inbyggda taggar inuti den - och den . De måste båda vara stängda innan den innehållande rutan kan stängas. Exempel: Detta är a mening av text och det har också lite kursiv text för. Detta är en annan punkt. I det här fallet har vi lådor inuti lådor! Den mest utrustade rutan är Den främsta orsaken till att du ska bry sig om att bo är om du ska använda CSS. Cascading Style Sheets bygger på etiketter som konsekvent är kapslade i dokumentet så att det kan berätta var stilar börjar och slutar. Om du ställer in en stil som ska påverka alla "länkar som ligger inuti divisionen med en klass av huvudinnehåll" på texten, gör det felaktigt för webbläsaren att det är svårt för webbläsaren att veta var man ska tillämpa dessa stilar. Låt oss titta på några HTML: Exempel: Detta är a mening av text och det har också lite kursiv text för. Detta är en annan punkt. Med hjälp av det exempel jag just sagt, om jag ville skriva en CSS-stil som skulle påverka länken inuti denna division, och bara den länken (i motsats till andra länkar i andra delar av sidan) skulle jag behöva använda nesting att skriva min stil, som sådan: .main-content a { färg: # F00;}
Andra orsaker är tillgänglighet och webbläsarkompatibilitet. Om din HTML är inkorrerad är den inte lika tillgänglig för skärmsläsare och äldre webbläsare - och det kan till och med helt bryta visuellt utseende på en sida om webbläsarna inte kan ta reda på hur man korrekt gör en sida eftersom HTML-element och taggar är inte på plats. Slutligen, om du strävar efter att skriva helt korrekt och giltig HTML, måste du använda rätt nestning. I annat fall kommer varje validator att flagga din HTML som felaktig. Lägger till fler nestade etiketter
Varför ska du bry dig om Nesting
