Divs og spænder kan ikke udskiftes i bygning af websider. Hver tjener forskellige formål, og at vide, hvornår de skal bruges, hjælper dig med at udvikle rene, nemme at administrere websteder.
Brug af Div-elementet
Divs definere logiske opdelinger på din webside. EN div—Kort til opdeling — er dybest set en kasse, hvor du kan placere andre HTML-elementer der hører sammen. En division kan have flere andre elementer i sig, såsom afsnit, overskrifter, lister, links, billeder osv. Det kan endda have andre divisioner inde i det for at give yderligere struktur og organisation.
At bruge div element, placer et åbent tag inden det område af din side, du vil have som en separat division og en lukning
indholdet af div
Hvis du styler dette område med CSS, kan du tilføje en ID vælger til indledende div-tag:
Eller du kan tilføje en klassevælger:
Du kan derefter arbejde med disse elementer i CSS eller JavaScript.
Nuværende bedste praksis læner sig mod at bruge klasseudvælgere i stedet for id'er, dels på grund af hvordan specifikke id-udvælgere er. Enten er dog acceptabel, og du kan endda give en
div både et ID og en klassevælger.Divs eller sektioner?
Det div element er forskelligt fra HTML5afsnit element, fordi det ikke giver det lukkede indhold nogen semantisk betydning. Hvis du ikke er sikker på, om blokken af indhold skal være en div eller a afsnit, tænk på elementets formål og indholdet.
- Hvis du har brug for elementet blot for at tilføje typografier til det område af siden, skal du bruge div element.
- Hvis indholdet har et særskilt fokus og kan stå alene, kan du overveje at bruge afsnit element i stedet.
I sidste ende begge dele divs og sektioner opfører sig på samme måde, og du kan give en af dem attributter og style dem med CSS. Begge er elementer på blokniveau.
Brug af spændvidder
Span er som standard et integreret element, i modsætning til div og afsnit elementer. Det spændvidde element bruges typisk til at pakke et bestemt stykke indhold som f.eks. tekst for at give det en ekstra krog, du kan bruge til at tilføje typografier. Uden nogen stilattributter dog spændvidde har slet ingen effekt på tekst.
En anden forskel mellem spændvidde og div elementer er, at div element inkluderer en afsnitskift, mens spændvidde element fortæller kun browseren at anvende tilknyttede CSS - stilregler på det, der er lukket for tags:
Fremhævet tekst og ikke-fremhævet tekst.
Du kan tilføje.
class = "highlight"
eller ligner spændvidde element for at style teksten med CSS.
Spanelementet har ingen krævede attributter, men de tre, der er mest nyttige, er de samme som for div element:
- stil
- klasse
- ID
Brug spændvidde når du vil ændre stilen på indholdet uden at definere det indhold som en ny element på blokniveau i dokumentet.
For eksempel, hvis du vil have det andet ord i et h3 overskriften til at være rød, kan du omgive ordet med en spændvidde element, der vil style dette ord som rød tekst. Ordet er stadig en del af h3 element, men vises i rødt.