Visa källa för 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å. Det vill säga, sådant som inte har någon speciell [[semantik|semantisk]] betydelse. För att lösa dylika situationer så finns det ett par [[tagg]]ar att ta till. Den ena är tänkt för [[inline-element]] och den andra för [[block-element]].

== <code>&lt;[[span]]></code> ==
För inline-material använder man sig av <code>&lt;[[span]]></code>. Denna tagg visar att något har en spännvidd som sträcker sig över dess underelement. Eftersom detta är ett inline-element, så kommer inte layouten att påverkas, förutom i de fall den CSS du kopplar till elementet påverkar något layoutmässigt.

Ett exempel på användningen:
<codepen pen="jPpGJX" tab="html" height="150">
</codepen>
Här skapar vi ett <code>[[span]]</code>-element med textinnehållet ”vit”. Vi kopplar även elementet till en [[class|klass]], som heter ”vit”. Även om klassnamnet förmedlar något slags information till oss, så har det ingen egentlig [[semantik|semantisk]] betydelse. 

Med hjälp av denna klasskoppling kan vi sedan skriva en [[CSS-regel]] som ställer om färgen, t.ex.:
<codepen pen="jPpGJX" tab="css,result" height="175">
</codepen>

== <code>&lt;[[div]]></code> ==
För att skapa icke-semantiska [[block-element]] kan vi använda oss av <code>[[div]]</code>-taggen. <code>[[Div]]</code> ä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 det har därmed alla CSS-egenskaper som gäller för dessa tillgängliga.

Ett enkelt exempel:
<codepen pen="QPgqdN" tab="html,result" height="200">
<syntaxhighlight lang="html5">
<div class="låda"><p>En egen liten låda.</p></div>
</syntaxhighlight>
</codepen>
Detta skapar en eget blockelement, som innehåller ett <code>[[p]]</code>-element, som i sin tur har textinnehållet ”<code>En egen liten låda</code>”. <code>[[div]]</code>-elementet tilldelas även [[class|klass]]en ”<code>låda</code>”, vilket gör att vi enkelt kan påverka dess utseende med hjälp av lite [[CSS]]:
<codepen pen="eNjGqO" tab="css,result" height="200">
<syntaxhighlight lang="html5">
.låda {
  width: 200px;
  height: 40px;
  background-color: blue;
  color: white;
}
</syntaxhighlight>
</codepen>
Ovanstående [[CSS-regel]] kommer att skapa en enkel layout för de [[element]] som använder sig av ”<code>låda</code>”-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).

=== Att ange <code>[[width]]</code> och/eller <code>[[height]]</code> ===
I vår CSS kan vi alltså styra vilken bredd och höjd ett element ska ha. Detta gör att vi kan skapa en layout för vår sida. Det finns många olika måttenheter vilka man kan använda för att ange bredd och höjd (vi tittar på flera av dessa i nästa sektion).

I exemplet ovan har vi använt oss av <code>px</code> som måttenhet. Detta är mer eller mindre synonymt med en pixel, det vill säga det minsta möjliga elementet på en bildskärm. Skulle vi visa exemplet på en full-HD-skärm, som är 1920x1080 pixlar stor, skulle alltså lådan ta upp ca 20 % av skärmens bredd.

=== Att utelämna <code>[[width]]</code> och/eller <code>[[height]]</code> ===
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. Detta kan dock påverkas av inställningar i föräldraelementet, t.ex. så kan <code>padding</code> göra att inte all yta kan utnyttjas.

* För höjd så försöker webbläsaren räkna ut hur mycket plats som behövs för att täcka allt innehåll inuti elementet. Det vill säga förvalet är att göra blocket precis så högt att allt innehåll får plats i det.

== Block är grunden till layout ==
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]]

[[Category:Webbutveckling]]

__FORCETOC__