HTML-attribut ger ytterligare information om HTML-element. Alla HTML-element kan ha attribut. Attribut anges alltid i starttaggen och kommer vanligtvis i namn/värde-par som: name=”value”. HTML-standarden kräver inte citattecken runt attributvärden, dock rekommenderar W3C citattecken i HTML. Ibland måste du använda citattecken, till exempel när värdet innehåller ett mellanslag. Dubbla citattecken runt attributvärden är det vanligaste i HTML, men enkla citattecken kan också användas. I vissa situationer, när attributvärdet i sig innehåller dubbla citattecken, är det nödvändigt att använda enkla citattecken. Till exempel:
<p title='John "ShotGun" Nelson'>
eller tvärtom:
<p title="John 'ShotGun' Nelson">
Några exempel på attribut är:
href
- Taggen <a> definierar en hyperlänk. Attributet href specificerar webbadressen (URL) för den sida som länken leder till. Exempel:
<a href="https://www.länkentilldinsida.se">Den synliga texten som användaren ska klicka på för att komma till sidan som du har angivit</a>
src
- Taggen <img> används för att bädda in en bild på en HTML-sida. Attributet src specificerar sökvägen till den bild som ska visas. Exempel:
<img src="img_girl.jpg">
Det finns två sätt att ange webbadressen (URL) i src-attributet:
- Absolut URL – Länkar till en extern bild som är hostad på en annan webbplats. Exempel: src=”https://www.w3schools.com/images/img_girl.jpg”. Externa bilder kan dock ha upphovsrätt. Om du inte har tillstånd att använda dem kan du bryta mot upphovsrättslagarna. Dessutom har du ingen kontroll över externa bilder; de kan plötsligt tas bort eller ändras.
- Relativ URL – Länkar till en bild som är hostad på webbplatsen. Här inkluderar inte URL:en domännamnet. Om URL:en börjar utan snedstreck kommer den vara relativ till den aktuella sidan. Exempel: src=”img_girl.jpg”. Om URL:en börjar med ett snedstreck kommer den vara relativ till domänen. Exempel: src=”/images/img_girl.jpg”. Med andra ord: om du har en bild med sökvägen “/images/img_girl.jpg” och den används i koden på din index.html-sida, kommer webbläsaren att tolka det som att den ska leta efter bilden från roten av domänen. Så om din webbplats är www.example.com, kommer den att leta efter bilden på www.example.com/images/img_girl.jpg. Men om du har en relativ sökväg utan ett snedstreck i början, som “images/img_girl.jpg”, kommer webbläsaren att leta efter bilden relativt till den aktuella sidan. Så om du är på www.example.com/mypage.html, kommer den att leta efter bilden på www.example.com/mypage.html/images/img_girl.jpg.
Det är nästan alltid bäst att använda relativa URL:er. De kommer inte att sluta fungera om du ändrar domän.
width och height
Taggen <img> bör också innehålla attributen width och height, som specificerar bredd och höjd på bilden (i pixlar):
<img src="img_girl.jpg" width="500" height="600">
alt
Det obligatoriska alt-attributet för taggen <img> specificerar en alternativ text för en bild om bilden av någon anledning inte kan visas. Det kan exempelvis bero på en långsam anslutning, ett fel i src-attributet eller om användaren använder en skärmläsare.
<img src="img_girl.jpg" alt="Girl with a jacket">
style
Attributet style används för att lägga till stilar till ett element, såsom färg, typsnitt, storlek osv. Exempel:
<p style="color:red;">Detta är ett stycke med röd text</p>
lang
Du bör alltid inkludera attributet lang inuti <html>-taggen för att deklarera språket på webbsidan. Detta är avsett att hjälpa sökmotorer och webbläsare. Följande exempel specifierar svenska som språk:
<!DOCTYPE html>
<html lang="sv">
<body>
...
</body>
</html>
Landkoder kan också läggas till i språkkoden i lang-attributet. Så, de första två tecknen definierar språket på HTML-sidan, och de sista två tecknen definierar landet (t.ex. en-US).
title
Attributet title definierar extra information om ett element. Värdet av title-attributet kommer att visas när du sveper muspekaren över elementet:
<p title="Detta kommer att visas när man sveper muspekaren över elementet">Detta är ett stycke</p>
Några exempel på situationer där det kan vara lämpligt att använda title-attributet:
- Länkar (a-taggar): Använd title för att ge en kort beskrivning av länkens syfte eller mål. Det kan vara användbart för att informera användaren om var länken kommer att leda dem.
- Formulärinmatningselement: Använd title för att ge användaren extra information om hur ett formulärfält ska fyllas i eller vilken typ av information som förväntas.
- Övriga element: I allmänhet kan du använda title för att tillhandahålla extra information om andra HTML-element där en kort förklaring kan vara användbar för användaren.
Titelattributet (och alla andra attribut) kan skrivas med versaler eller gemener, som titel eller TITLE. Dock rekommenderar W3C små bokstäver för attribut i HTML.