Sådan bruger du Span og Div HTML-elementer

Brug span og div med CSS for større stil og layout kontrol.

Mange mennesker, der er nye til webdesign og HTML / CSS bruger og

-elementerne interchangeably, da de udbygger websider. Virkeligheden er imidlertid, at hver af disse HTML-elementer tjener forskellige formål. At lære at bruge hver til det tilsigtede formål, vil hjælpe dig med at udvikle renere websider, hvis kode er lettere at administrere overordnet.

Brug af
Element

Div-elementet definerer logiske divisioner på din webside.

Det er dybest set en boks, hvor du kan placere andre HTML-elementer, som logisk går sammen. En division kan have flere andre elementer i den, som afsnit, overskrifter, lister, links, billeder osv. Det kan endda have andre divisioner inde i det for at give yderligere struktur og organisation til dit HTML-dokument.

For at bruge div-elementet skal du placere en åben

-kode før det område på din side, du vil have som en separat division, og et tæt -tag efter det:

indhold af div

Hvis området på din side har brug for nogle yderligere oplysninger, som du vil bruge til at style med CSS senere, kan du tilføje en idvælger (f.eks.

id = "myDiv">) eller en klassevælger (f.eks. class = "bigDiv">). Begge disse attributter kan derefter vælges ved hjælp af CSS eller modificeret ved hjælp af JavaScript. Nuværende bedste praksis lægger vægt på at bruge klassevalgere i stedet for id'er, dels på grund af, hvordan specifikke ID-selektorer er. I sandhed kan du dog bruge enten en og kan endda give en division både et ID og en klassevælger.

Hvornår skal du bruge

Versus

Div-elementet er forskelligt fra HTML5-sektionselementet, fordi det ikke giver det medfølgende indhold nogen semantisk betydning. Hvis du ikke er sikker på, om indholdsblokken skal være en div eller et afsnit, skal du tænke over, hvad formålet med elementet og indholdet er at hjælpe dig med at bestemme, hvad du skal bruge:

  • Hvis du har brug for elementet blot at tilføje stilarter til det pågældende område på siden, skal du bruge div-elementet.
  • Hvis indholdet, der skal indeholdes, har et særligt fokus og kan stå alene, kan du i stedet bruge sektionselementet.

I sidste ende opfører begge divs og sektioner stort set på samme måde, og du kan give en af ​​dem attributværdier og stil dem med CSS for at få udseendet af dit websted, du har brug for. Begge disse er blokniveau elementer.

Brug af Element

Spændelementet er som standard et inline-element. Dette sætter det fra hinanden fra div og sektionselementerne. Spændelementet bruges ofte til at indpakke et bestemt stykke indhold, normalt tekst, for at give det en ekstra "krog", som kan styles senere. Bruges med CSS, kan det ændre stilen på den tekst, den omslutter; Men uden spændingsattributter har spændingselementet alene ingen virkning på tekst overhovedet.

Dette er den største forskel mellem spændet og div-elementerne. Som nævnt ovenfor indeholder div-elementet en afsnitspause, mens spanelementet kun fortæller browseren at anvende tilknyttede CSS-stilregler til, hvad der er vedlagt -tagerne:


Fremhævet tekst og ikke-fremhævet tekst.

Tilføj klassen = "højdepunkt" eller anden klasse til spanelementet for at indstille teksten med CSS (f.eks. Klasse = "fremhæv">).

Spanelementet har ingen påkrævede egenskaber, men de tre, der er mest nyttige, er de samme som i div-elementet:

  • stil
  • klasse
  • id

Brug span, når du vil ændre indholdsstilen uden at definere det indhold som et nyt blokniveauelement i dokumentet.

Hvis du f.eks. Vil have det andet ord i en h3-overskrift til at være rødt, kan du omslutte det pågældende ord med et spændingselement, der ville formatere det pågældende ord som rød tekst. Ordet er stadig en del af h3-elementet, men nu vises også i rødt:

Dette er min fantastiske overskrift

Redigeret af Jeremy Girard den 2/2/17