En introduktion till attribut

Så gott som alla taggar 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 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å). Flertalet taggar 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:

<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 alla taggar (ä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 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. 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 taggen för att de ska börja gälla. Så här till exempel:

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

reversed tillhör den typ 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 från och med 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:

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

type

Det sista, egna attributet som <ol> har är ”type”, vilket styr vilken typ av uppräkning listan ska ha. 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:

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

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

Lägg märke till att vi satt det tilldelade värdena 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 '.

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:

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

Mer om attribut

Om du använder Webblings 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 attributen, dvs de som kan användas med alla taggar. Med hjälp av attributen får du mer specifik kontroll över hur varje element ska hanteras.

Övningar

Lägg till de attribut som behövs för att få till det efterfrågas (klicka på "Edit on CodePen" för att utföra övningen).

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

Nästa aktivitet

URL-grunder