Visa källa för En introduktion till attribut

Så gott som alla [[tagg]]ar har olika typer av egenskaper som går att styra och förändra. Dessa egenskaper kallas för [[attribut]]. Det finns dels en uppsättning grundattribut som alla [[tagg]]ar stödjer – det kan t.ex. vara [[attribut]] för att ange vilket språk som används i ett [[element]] (mänskligt språk alltså). Flertalet [[tagg]]ar har även egna, specifika [[attribut]] som enbart fungerar med dem.
== Att sätta attribut ==
[[Attribut]] anges genom att man lägger till extra ord inuti en [[starttagg]]. Om vi till exempel skulle vilja tala om att ett stycke är på svenska skulle vi kunna göra så här:

<div class="well well-cyanide-light">
<syntaxhighlight lang="html5">
<p lang="sv">Detta är på svenska</p>
</syntaxhighlight>
</div>

[[Attribut]]et är alltså ”<code>[[Globala_attribut#lang|lang]]</code>”, vilket är en förkortning för language. Med hjälp av ”<code>=</code>”-tecknet så tilldelar vi [[attribut]]et ett värde, det vill säga vi sätter det till något. I det här fallet sätter vi det till språkkoden för det svenska språket. Just ”<code>[[Globala_attribut#lang|lang]]</code>” är ett [[globala attribut|globalt attribut]] som kan sättas alla [[tagg]]ar (även om det kanske inte alltid är användbart för alla taggar). Det kan vara bra att ha tillgång till, inte minst om vi blandar olika språk på en sida. Vissa webbläsare fattar vilket språk som används på en sida utifrån detta [[attribut]] och kan då erbjuda sig att, vid behov, översätta sidan.

== Attribut för ordnade listor ==
Om vi återgår till den ordnade listan vi höll på med i [[list-grunder|förra sektionen]], så kommer vi att finna att den har en uppsättning [[attribut]] som kan styra hur uppräkningen går till. Följande [[attribut]] finns att tillgå (förutom de [[globala attribut]]en):

* <code>reversed</code>
* <code>start</code> 
* <code>type</code> 

=== <code>reversed</code> ===
Det första <code>[[ol]]</code>-attributet anger att listan ska numreras omvänt, eller baklänges. Startelementet i listan kommer alltså få det högsta uppräkningsnumret. Detta [[attribut]] tillhör en uppsättning [[attribut]] som är lite speciella, för de behöver inte sättas till något värde, utan det räcker att de finns med i [[tagg]]en för att de ska börja gälla. Så här till exempel:
<codepen pen="bdLNgK" height="200" tab="html,result">
<syntaxhighlight lang="html5">
<ol reversed>
   <li>Knäck äggen</li>
   <li>Häll i äggen i skålen</li>
   <li>Vispa äggen</li>
</ol>
</syntaxhighlight>
</codepen>
Detta skulle skapa en baklängeslista:

<codepen pen="bdLNgK" height="200" tab="result">
<pre>
3. Knäck äggen
2. Häll i äggen i skålen
1. Vispa äggen
</pre>
</codepen>

<code>reversed</code> tillhör den typ av [[attribut]] som kallas för [[boolesk]]a [[attribut]]. Det kommer ifrån en speciell gren inom matematiken där man räknar med sanningsvärde; saker är antingen sanna eller falska och inget annat. Det faktum att [[attribut]]et förekommer gör att det är ”sant”, medans då det inte förekommer så är det ”falskt”.

=== <code>start</code> ===
Med hjälp av ett annat [[attribut]] kan vi ange från och med vilken siffra uppräkningen ska påbörjas. Det görs med [[attribut]]et ”<code>start</code>”. Detta är inte ett booleskt [[attribut]], utan vi måste sätta det till ett värde för det ska göra någon nytta. Till exempel skulle vi kunna ändra vår lista så här:
<codepen pen="aOqzJO" height="200">
<syntaxhighlight lang="html5">
<ol start=”10”>
   <li>Knäck äggen</li>
   <li>Häll i äggen i skålen</li>
   <li>Vispa äggen</li>
</ol>
</syntaxhighlight>
</codepen>
Vilket skulle resultera i följande lista:

<codepen pen="aOqzJO" height="200" tab="result">
<pre>
10. Knäck äggen
11. Häll i äggen i skålen
12. Vispa äggen
</pre>
</codepen>

=== <code>type</code> ===
Det sista, egna [[attribut]]et som <code>&lt;[[ol]]></code> har är ”<code>type</code>”, dvs vilken typ av lista detta är. Man kan sätta typen till följande värden:

; <code>1</code> : Vanlig numrering (förvalet, om man inte sätter något annat).
; <code>A</code> : Räkna upp i alfabetisk ordning, med versaler (stora bokstäver).
; <code>a</code> : Räkna upp i alfabetisk ordning, med gemener (små bokstäver).
; <code>I</code> : Räkna med romerska siffror, med versaler.
; <code>i</code> : Räkna med romerska siffror, med gemener.

Vi kör ett exempel där vi sätter uppräkningen till romerska siffror, det skulle se ut så här:
<codepen pen="BNYyRx" height="200">
<syntaxhighlight lang="html5">
<ol type=”i”>
   <li>Knäck äggen</li>
   <li>Häll i äggen i skålen</li>
   <li>Vispa äggen</li>
</ol>
</syntaxhighlight>
</codepen>
Vilket skulle resultera i följande lista:

<pre>
i.   Knäck äggen
ii.  Häll i äggen i skålen
iii. Vispa äggen
</pre>

== Att tänka på när man anger värden för attribut ==
<div class="well well-meadow">
Lägg märke till att vi satt det tilldelade värdena inom citat-tecken, dvs <code>"</code>. Det är egentligen inte nödvändigt, men som skrivits många gånger hitintills så är det en god vana som kan förhindra vissa typer av fel. Det är nämligen som så att det fungerar utan citat-tecknet så länge det är ett enda, sammanhängande värde vi vill tilldela. Om värdet innehåller mellanslag, kommer den första delen att tilldelas till [[attribut]]et, medan allt efter mellanslaget kommer att tolkas som ett nytt [[attribut]]. Vilket antagligen inte är vad man förväntat sig. Så gör det till en god vana att skriva dit <code>"</code>-tecknet! Det fungerar även att använda sig av enkel citat-tecknet, dvs <code>'</code>.
</div>

== Att sätta flera, samtidiga attribut ==
Självklart kan man sätta flera [[attribut]] samtidigt i en och samma tagg. Ville vi ha romerska siffror och baklängesräkning skulle vi göra så här:
<codepen pen="ZGrYKd" height="200">
<syntaxhighlight lang="html5">
<ol type=”i” reversed>
   <li>Knäck äggen</li>
   <li>Häll i äggen i skålen</li>
   <li>Vispa äggen</li>
</ol>
</syntaxhighlight>
</codepen>

Vilket skulle resultera i följande lista:
<codepen pen="ZGrYKd" height="200" tab="result">
<pre>
iii. Knäck äggen
ii.  Häll i äggen i skålen
i.   Vispa äggen
</pre>
</codepen>

== Mer om attribut ==
Om du använder [[Webbling]]s lista över [[HTML5-taggar]], kan du se vilka specifika [[attribut]] som finns tillgängliga för varje [[HTML]]-[[tagg]]. Det finns även en lista över de [[globala attribut]]en, dvs de som kan användas med alla [[tagg]]ar.  Med hjälp av [[attribut]]en får du mer specifik kontroll över hur varje [[element]] ska hanteras.

== Nästa aktivitet ==
[[URL-grunder]]

[[Category:Webbutveckling]]