Hvordan bruke Span og Div HTML-elementene

Ulike tagger for ulike formål

Hamza TArkkol/Getty Images

To og spenner er ikke utskiftbare i nettsidebygging. Hver av dem tjener forskjellige formål, og å vite når du skal bruke hver av dem vil hjelpe deg med å utvikle rene nettsteder som er enkle å administrere.

Bruke Div Element

To definere logiske inndelinger på nettsiden din. EN div —forkortelse for divisjon—er i utgangspunktet en boks der du kan plassere andre HTML-elementer som hører sammen. En divisjon kan ha flere andre elementer i seg, for eksempel avsnitt, overskrifter, lister, lenker, bilder osv. Den kan til og med ha andre avdelinger inni seg for å gi ekstra struktur og organisering.

For å bruke div element, plasser en åpen tag før området på siden din som du ønsker som en egen avdeling, og en avslutning tag etter det:

|_+_|

Hvis du skal style dette området med CSS, kan du legge til en ID velger til åpnings-div-taggen:

|_+_|

Eller du kan legge til en klassevelger:

|_+_|

Du kan deretter jobbe med disse elementene i CSS eller JavaScript.

Gjeldende beste praksis lener seg mot å bruke klassevelgere i stedet for ID-er, delvis på grunn av hvor spesifikke ID-velgere er. Begge er imidlertid akseptable, og du kan til og med gi en div både en ID og en klassevelger.

Divs eller seksjoner?

De div element er forskjellig fraHTML5 seksjon element fordi det ikke gir det vedlagte innholdet noen semantisk betydning. Hvis du ikke er sikker på om innholdsblokken skal være en div eller a seksjon , tenk på formålet med elementet og innholdet.

• Hvis du trenger elementet bare for å legge til stiler til det området på siden, bør du bruke div element.
• Hvis innholdet har et tydelig fokus og kan stå alene, bør du vurdere å bruke seksjon element i stedet.

Til syvende og sist begge deler to og seksjoner oppfører seg på samme måte, og du kan gi en av dem attributter og style dem med CSS. Begge er elementer på blokknivå.

Bruk av spenn

Spenn er et innebygd element som standard, i motsetning til div og seksjon elementer. De span element brukes vanligvis til å pakke inn et spesifikt innhold, for eksempel tekst, for å gi det en ekstra krok du kan bruke til å legge til stiler. Uten noen stilattributter, men span har ingen effekt på tekst i det hele tatt.

En annen forskjell mellom span og div elementer er at div element inkluderer et avsnittsskift, mens span element forteller bare nettleseren å bruke tilhørende CSS-stilregler på det som er omsluttet av tagger:

|_+_|

Du kan legge til

|_+_|

eller lignende til span element for å style teksten med CSS.

Span-elementet har ingen nødvendige attributter, men de tre som er mest nyttige er de samme som de av div element:

stil klasse ID

Bruk span når du vil endre stilen på innholdet uten å definere det innholdet som et nytt element på blokknivå i dokumentet.

For eksempel, hvis du vil ha det andre ordet i en h3 overskriften til å være rød, kan du omgi det ordet med en span element som vil style det ordet som rød tekst. Ordet er fortsatt en del av h3 element, men vises i rødt.