En introduktion till attribut

Så gott som alla taggar har olika typer av egenskaper som går att styra på olika sätt. Dessa egenskaper kallas för attribut. Det finns dels en uppsättning grundattribut som alla taggar 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å). Men flertalet taggar har 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:

<p lang=”sv”>Detta är på svenska</p>

Attributet är alltså ”lang”, vilket är en förkortning för language. Med hjälp av ”=”-tecknet så tilldelar vi attributet 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 ”lang” är ett globalt attribut som kan sättas i så gott som 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 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 attributen):

reversed
start 
type

reversed

Det första ol-attributet anger att listan ska numreras omvänt, eller baklänges. Det första elementet i listan ska 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 taggen för att de ska börja gälla. Så här till exempel:

<ol reversed>
   <li>Knäck äggen</li>
   <li>Häll i äggen i skålen</li>
   <li>Vispa äggen</li>
</ol>

Detta skulle skapa en baklängeslista:

3. Knäck äggen
2. Häll i äggen i skålen
1. Vispa äggen

reversed tillhör den typen av attribut som kallas för booleska 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 attributet förekommer gör att det är ”sant”, medans då det inte förekommer så är det ”falskt”.

start

Med hjälp av ett annat attribut kan vi ange på vilken siffra uppräkningen ska påbörjas. Det görs med attributet ”start”. 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:

<ol start=”10”>
   <li>Knäck äggen</li>
   <li>Häll i äggen i skålen</li>
   <li>Vispa äggen</li>
</ol>

Vilket skulle resultera i följande lista:

10. Knäck äggen
11. Häll i äggen i skålen
12. Vispa äggen

Att tänka på när man anger värden för attribut

Lägg märke till att vi satte det tilldelade värdet inom citat-tecken, dvs ”. 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 attributet, 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 ”-tecknet! Det fungerar även att använda sig av enkel citat-tecknet, dvs '.

type

Det sista, egna attributet som <ol> har är ”type”, dvs vilken typ av lista detta är. Man kan sätta typen till följande värden:

1

Vanlig numrering (förvalet, om man inte sätter något annat).

A

Räkna upp i alfabetisk ordning, med versaler (stora bokstäver).

a

Räkna upp i alfabetisk ordning, med gemener (små bokstäver).

I

Räkna med romerska siffror, med versaler.

i

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:

<ol type=”i”>
   <li>Knäck äggen</li>
   <li>Häll i äggen i skålen</li>
   <li>Vispa äggen</li>
</ol>

Vilket skulle resultera i följande lista:

i.   Knäck äggen
ii.  Häll i äggen i skålen
iii. Vispa äggen

Att sätta flera, samtidiga attribut

Självklart kan man sätta flera attribut samtidigt i samma tagg. Ville vi ha romerska siffror och baklängesräkning skulle vi göra så här:

<ol type=”i” reversed>
   <li>Knäck äggen</li>
   <li>Häll i äggen i skålen</li>
   <li>Vispa äggen</li>
</ol>

Vilket skulle resultera i följande lista:

iii. Knäck äggen
ii.  Häll i äggen i skålen
i.   Vispa äggen

Mer om attribut

Om du använder Webblings lista över HTML5-taggar, kan du hitta vilka specifika attribut som finns till varje HTML-tagg. Det finns även en lista över de globala attributen, dvs de som kan användas med så gott som alla taggar. Med hjälp av attributen får du mer specifik kontroll över hur varje element ska hanteras.

Nästa aktivitet: URL-grunder