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 för vilket det inte finns någon passande tagg. Detta handlar oftast om innehåll som vi bara vill förändra utseendet på. Sådant som inte har någon speciell semantisk betydelse. 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 tagg visar att något har en spännvidd och som sträcker sig över dess underelement. Ett exempel på användningen:

See the Pen jPpGJX by Patrik Grip-Jansson (@PGJ) on CodePen.

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.:

See the Pen jPpGJX by Patrik Grip-Jansson (@PGJ) on CodePen.

Tryck på "Result"-fliken för att se hur exemplet blir att se ut i slutändan.

<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. Resultatet kommer att bli ett block-element och har därmed alla CSS-egenskaper som gäller för dessa tillgängliga.

Ett enkelt exempel:

See the Pen eNjGqO by Patrik Grip-Jansson (@PGJ) on CodePen.

Detta skapar en eget blockelement, 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:

See the Pen eNjGqO by Patrik Grip-Jansson (@PGJ) on CodePen.

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 % av föräldraelementet som gäller, dvs webbläsaren fyller ut all 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 blocket precis så hög att allt innehåll får plats i det.

Det vi just nu gått igenom, 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