Hvis du ser på HTML-oppslaget for en nettside i dag, vil du se HTML-elementer som finnes i andre HTML-elementer. Disse elementene som er "inne" av andre er det som kalles "nestede elementer", og de er viktige for å bygge en hvilken som helst nettside i dag.
Hva betyr det for Nest-HTML-tagger?
Den enkleste måten å forstå nesting er å tenke på HTML-koder som bokser som holder innholdet ditt. Ditt innhold kan inneholde tekst, bilder, etc. HTML-koder er boksene rundt innholdet. Noen ganger må du plassere bokser i andre bokser. Disse "indre" boksene er innhyllet av andre.
Hvis du har en blokk med tekst som du vil ha fet skrift i et avsnitt, har du to HTML-elementer, så vel som selve teksten.
Eksempel: Dette er en setning av tekst.
Den teksten er det vi skal bruke som vårt eksempel. Slik er det skrevet.
Eksempel: Dette er en setning i tekst. Fordi du vil at ordet "setning" skal være fet, legger du til at du åpner og lukker fet koder før og etter det ordet.
Eksempel: Dette er en setning av tekst. Som du kan se, har vi en boks (avsnittet) som inneholder innholdet / teksten til setningen vår, pluss en andre boks (det sterke tagparet), som vil gjengi dette ordet som fet skrift. Når du nester koder, er det viktig at du lukker koder i motsatt rekkefølge som du åpnet dem. Du åpner først etterfulgt av , som betyr at du reverserer det og lukker og deretter En annen måte å tenke på dette er å igjen bruke analogi av bokser. Hvis du legger en boks inne i en annen boks, må du lukke den indre før du kan lukke den ytre eller inneholdende boksen. Hva om du bare vil ha ett eller to ord til å være modig, og et annet sett å være kursiv? Slik gjør du det. Eksempel: Dette er en setning av tekst og det har også noen kursiv tekst også. Du kan se at vår ytre boks, , har nå to nestede koder inne i den - og . De må begge være stengt før den inneholder boksen kan lukkes. Eksempel: Dette er en setning av tekst og det har også noen kursiv tekst også. Dette er et annet avsnitt. I dette tilfellet har vi bokser inne i esker! The most out boksen er Den første grunnen til at du burde bryr deg om nesting er hvis du skal bruke CSS. Cascading Style Sheets er avhengig av tagger som skal være konsekvent nestet i dokumentet slik at det kan fortelle hvor stilarter begynner og slutter. Hvis du konfigurerer en stil som bør påvirke alle "koblinger som er inne i divisjonen med en klasse av« hovedinnhold »-tekst på siden, gjør det feil for nettleseren å vite hvor disse stilene skal brukes. La oss se på noen HTML: Eksempel: Dette er en setning av tekst og det har også noen kursiv tekst også. Dette er et annet avsnitt. Ved å bruke eksemplet jeg nettopp har sagt, hvis jeg ønsket å skrive en CSS-stil som ville påvirke lenken i denne delen, og bare den linken (i motsetning til andre lenker i andre deler av siden), måtte jeg bruke nesting å skrive min stil, som sådan: .main-innhold a { farge: # F00;}
Andre grunner inkluderer tilgjengelighet og nettleserkompatibilitet. Hvis HTML-en din er feilnestet, vil den ikke være like tilgjengelig for skjermlesere og eldre nettlesere - og det kan til og med helt ødelegge et visuelt utseende på en side hvis nettleserne ikke kan finne ut hvordan du skal skape en side på riktig måte fordi HTML-elementer og tagger er ute av sted. Til slutt, hvis du prøver å skrive helt riktig og gyldig HTML, må du bruke riktig nesting. Ellers vil alle validatorer flagge HTML-en din som feil. Legge til flere nestede merker
Hvorfor bør du bryr deg om Nesting
