Hvis du ser på HTML-markeringen for en webside i dag, vil du se HTML-elementer indeholdt i andre HTML-elementer. Disse elementer, der er "indvendige" af andre, er såkaldte "indlejrede elementer", og de er afgørende for at opbygge en webside i dag.
Hvad betyder det for Nest HTML-tags?
Den nemmeste måde at forstå nesting på er at tænke på HTML-tags som kasser, der holder dit indhold. Dit indhold kan indeholde tekst, billeder osv. HTML-tags er boksene omkring indholdet. Nogle gange skal du placere kasser inde i andre kasser. Disse "indre" kasser er indlejret inde i andre.
Hvis du har en tekstblok, som du vil have fed i et afsnit, har du to HTML-elementer såvel som selve teksten.
Eksempel: Dette er en dømme af tekst.
Denne tekst er, hvad vi vil bruge som vores eksempel. Her er, hvordan det ville blive skrevet.
Eksempel: Dette er en sætning af tekst. Fordi du vil have ordet "sætning" for at være fed, tilføjer du åbning og lukning af fed-tags før og efter det pågældende ord.
Eksempel: Dette er en dømme af tekst. Som du kan se, har vi en boks (stykket), som indeholder indholdet / teksten i vores sætning plus en anden boks (det stærke tagpar), hvilket vil gøre dette ord til fed skrift. Når du nester tags, er det meget vigtigt, at du lukker mærkerne i den modsatte rækkefølge, du har åbnet dem. Du åbner først efterfulgt af , hvilket betyder at du vender om det og lukker og derefter den En anden måde at tænke over dette er at igen bruge analogi af bokse. Hvis du lægger en kasse inde i en anden kasse, skal du lukke den indre, inden du kan lukke den ydre eller indeholdende kasse. Hvad hvis du kun vil have et eller to ord til at være fed og et andet sæt skal være kursiv? Sådan gør du det. Eksempel: Dette er en dømme af tekst og det har også nogle kursiv tekst også. Du kan se, at vores ydre kasse, den , har nu to indlejrede tags inde i den - og . De skal begge lukkes, før den indeholder boks kan lukkes. Eksempel: Dette er en dømme af tekst og det har også nogle kursiv tekst også. Dette er et andet afsnit. I dette tilfælde har vi kasser inde i kasser! The most out box er den Nummeret en grund til, at du bør bekymre dig om nesting er, hvis du vil bruge CSS. Cascading Style Sheets er afhængige af tags, der skal være konsekvent indlejret i dokumentet, så det kan fortælle, hvor stilarter begynder og slutter. Hvis du opretter en stil, der skal påvirke alle "links, der er inde i divisionen med en klasse af indholdet" main content "på siden, gør det ukorrekt for browseren at vide, hvor de skal anvende disse stilarter. Lad os se på nogle HTML: Eksempel: Dette er en dømme af tekst og det har også nogle kursiv tekst også. Dette er et andet afsnit. Brug det eksempel, jeg netop har nævnt, hvis jeg ville skrive en CSS-stil, der ville påvirke linket inde i denne division, og kun det link (i modsætning til andre links i andre afsnit af siden), ville jeg bruge nesting at skrive min stil som sådan: .main-indhold a { farve: # F00;}
Andre grunde er tilgængelighed og browser kompatibilitet. Hvis din HTML er forkert indlejret, vil den ikke være så tilgængelig for skærmlæsere og ældre browsere - og det kan endda helt ødelægge et visuelt udseende af en side, hvis browserne ikke kan finde ud af, hvordan man korrekt kan lave en side, fordi HTML-elementer og tags er ude af sted. Endelig, hvis du stræber efter at skrive helt korrekt og gyldig HTML, skal du bruge korrekt nesting. Ellers vil hver validator markere din HTML som ukorrekt. Tilføjelse af flere nested tags
Hvorfor skal du bekymre dig om Nesting