Span- och div-element

När vi börjar designa utseende och layout på våra sidor, hamnar vi ofta i situationen att vi vill märka upp något som inte har någon speciell semantisk betydelse, kanske bara för att vi vill förändra utseendet på visst innehåll. För att lösa dylika situationer så finns det ett par taggar att ta till. Den ena är tänkt för inline-element och den andra för block-element.

<span>

För inline-material, använder man sig av <span>, denna tag visar att något har en spännvidd och sträcker sig över element-innehållet. Ett exempel på användningen:

<p>Denna text är <span class=”grön”>grön</span>.</p>

Här skapar vi ett span-element med textinnehållet ”grön”. Vi kopplar även elementet till en klass, som även den heter ”grön”. Även om klassnamnet förmedlar något slags information till oss, så har det ingen egentlig semantisk betydelse.

Med hjälp av denna klasskoppling kan vi sedan skriva en CSS-regel som ställer om färgen, t.ex.:

.grön {
  color: green;
}

<div>

För att skapa icke-semantiska block-element kan vi använda oss av div-taggen. Div är en förkortning av ”division”, alltså indelning. Vi delar in element-innehållet för sig själv och visar att det skiljer sig ifrån annat innehåll. Ett enkelt exempel:

<div class=”låda”><p>En egen liten låda.</p></div>

Detta skapar en eget block, som innehåller ett p-element, som i sin tur har textinnehållet ”En egen liten låda”. Div-elementet tilldelas även klassen ”låda”, vilket gör att vi enkelt kan påverka dess utseende med hjälp av lite CSS:

.låda {
  width: 200px;
  height: 40px;
  background-color: blue;
  color: white;
}

Ovanstående CSS-regel kommer att skapa en enkel layout för de element som använder sig av ”låda”-klassen. I detta fall kommer vi att ändra på höjd och bredd, samt att vi sätter så väl förgrunds- som bakgrundsfärg. Detta gör att det kommer att se ut som en egen liten ”låda” eller box (hur det här fungerar kallas för "boxmodellen" och vi återkommer straxt till det).

Om man inte anger någon höjd eller bredd kommer webbläsaren att använda ett par specifika förval. För bredd är det 100 % som gäller, dvs webbläsaren fyller ut allt tillgänglig area i bredd. För höjd så försöker webbläsaren räkna ut hur mycket area som behövs för att täcka allt innehåll. Det vill säga förvalet är att göra lådan precis så stor att allt innehåll får plats i den.

Det vi just nu ligger till grund för all layout med CSS. Vi kommer dock att behöva lite mer kunskap om CSS-egenskaper innan vi kan åstadkomma något snyggare än detta...

Nästa aktivitet: Måttenheter i CSS