Hvis du ser på HTML markering for enhver webside i dag vil du se HTML-elementer indeholdt i andre HTML-elementer. Disse elementer, der er "inde" i andre elementer, er kendt som indlejrede elementer, og de er vigtige for at opbygge enhver webside i dag.
Hvad betyder det at Nest HTML-tags?
Den nemmeste måde at forstå indlejring på er at tænke på HTML-tags som kasser, der indeholder dit indhold. Dit indhold kan omfatte tekst, billeder og relaterede medier. HTML-tags er boksene omkring indholdet. Nogle gange skal du placere kasser inde i andre kasser. Disse "indre" kasser er indlejret 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 sætning i teksten.
Denne tekst er det, vi vil bruge som vores eksempel. Sådan skrives det i HTML:
Eksempel: Dette er en sætning i teksten.
At lave ordet dømme fed, tilføj åbnings- og lukningskoder før og efter ordet.
Eksempel: Dette er en dømme af tekst.
Som du kan se, har vi et felt (afsnittet), der indeholder sætningens indhold, plus et andet felt (
stærk tagpar), der gengiver ordet som fed.Når du indlejrer tags, skal du lukke tags i den modsatte rækkefølge, som du åbnede dem. Du åbner
først efterfulgt af , hvilket betyder at du vender det om og lukker og derefter.
En anden måde at tænke over dette på er at bruge analogien af kasser igen. Hvis du placerer en kasse inde i en anden kasse, skal du lukke den indre, før du kan lukke den ydre eller indeholdende kasse.
Tilføjelse af flere indlejrede tags
Hvad hvis du kun vil have et eller to ord fed, og et andet sæt er 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 være lukket, før den indeholdende kasse 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! Den yderste boks er
eller a. division. Inde i boksen er der et par indlejrede. afsnit tags, og inde i første afsnit har vi et næste. og tagpar.Hvorfor skal du være interesseret i reden?
Årsag nr. 1 til, at du skal bekymre dig om indlejring, er, hvis du vil bruge CSS. Cascading Style Sheets stole på, at tags konsekvent indlejres i dokumentet, så det kan fortælle, hvor typografier begynder og slutter. Forkert indlejring gør det svært for browseren at vide, hvor disse typografier skal anvendes. 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 eksemplet ovenfor, hvis vi ville skrive en CSS-stil der vil påvirke linket inde i denne division, og kun det link (i modsætning til andre links i andre sektioner på siden), skal vi bruge indlejringen til at skrive denne stil som sådan:
.hovedindhold a {
farve: # F00;
}
Andre overvejelser
Tilgængelighed og browserkompatibilitet betyder også noget. Hvis din HTML er forkert indlejret, er den ikke så tilgængelig for skærmlæsere og ældre browsere - og den kan endda helt bryde visuelt udseende af en side, hvis browserne ikke kan finde ud af, hvordan man korrekt gengiver en side, fordi HTML-elementer og tags er ude af placere.
Endelig, hvis du stræber efter at skrive helt korrekt og gyldig HTML, skal du bruge korrekt indlejring. Ellers markerer hver validator din HTML som forkert.