HTML - Div og Span
Ofte trenger vi elementer som ikke har noen spesifikk semantisk betydning (som at det er en overskrift eller et avsnitt), men som kun brukes for å gruppere innhold sammen, gjerne for å kunne style det med CSS. Til dette bruker vi <div> og <span>.
Blokk-elementet <div>
En <div> (division/inndeling) er et blokk-element. Det betyr at den automatisk starter på en ny linje og tar opp all tilgjengelig bredde (som en usynlig boks rundt innholdet). Vi bruker det ofte for å gruppere større deler av nettsiden.
<div class="nyhetsartikkel">
<h3>Dagens nyheter</h3>
<p>Her er noe spennende innhold...</p>
</div>- Fungerer som en "boks" du kan putte andre elementer i.
- Brukes ofte sammen med attributtene
classelleridfor layout og styling i CSS.
Inline-elementet <span>
Et <span> er et inline-element. Det betyr at det ikke starter på en ny linje. Det tar bare opp nøyaktig så mye plass som innholdet inni det trenger. Vi bruker det typisk for å style en liten del av en tekst inni et annet element.
<p>
Dette er en helt vanlig tekst, men<spanclass="fremhevet">dette ordet</span>skiller seg ut.
</p>- Brukes inni blokk-elementer (som
<p>eller<h1>). - Perfekt for å endre farge, skrifttype eller størrelse på bare noen få ord midt i en setning.
Siden <div> er et blokk-element og <span> er et inline-element, henger bruken av disse tett sammen med CSS-egenskapen display.