HTML-attribut

Attribut anges alltid i den inledande taggen.
Attribut anges vanligtvis i par om namn/värde, som name="value".

href-attributet

Länkar anges med <a>-taggen medan länken anges i href-attributet.

Exempel:


                        <a href="https://www.w3schools.com">En länk</a>

Resultat:

En länk

Några andra exempel med två olika sätt att använda knappar som länkar:

Exempel:


                        <button type="submit" form="1"></a>Det här är en knapp (button-tag) som leder till W3Schools.com</button>

Resultat:

Exempel:


                        <form action="https://www.w3schools.com" id="1">

                        <input type="submit" value="Det här är en knapp (input-tag) som leder till W3Schools.com">

Resultat:

src-attributet

HTML-bilder anges med <img>-taggen. Filnamnet och dess sökväg anges i src-attributet.

Exempel:


                        <img src="../../img/bild.png">

Resultat:
Visar bilden "bild.png", som ligger i mappen "img", i sin fulla storlek oavsett storlek på webbläsarfönstret.

Bildbredd och höjd - width, height

Som standard försöker webbläsaren visa bilden i sin ursprungliga storlek men man kan ange bredd och höjd med width och height-attributen.Måtten anges som standard i antalet pixlar.

Exempel:


                            <img src="../../img/bild.png" width="320" height="180">

Resultat:
Visar bilden i en mindre storlek:

alt-attributet

Specifierar en alternativ text om en bild inte kan visas. alt-attributets värde kan läsas av skärmläsare så man kan höra en beskrivning av bilden.

Exempel på korrekt länkad bild:


                        <img title="Text som kommer fram när man vilar muspekaren på bilden" src="../../img/bild.png" alt="Alt-attributet anger alternativ information om en bild om användaren av någon anledning inte kan visa den (t ex pga av långsam anslutning, ett fel i src-attributet, eller om användaren använder en skärmläsare)." width="320" height="180">

Resultat:

Alt-attributet anger alternativ information om en bild om användaren av någon anledning inte kan visa den (t ex pga av långsam anslutning, ett fel i src-attributet, eller om användaren använder en skärmläsare)

Exempel på felaktigt länkad bild:


                        <img title="Text som kommer fram när man vilar muspekaren på bilden" src="img/felbild.png" alt="Alt-attributet anger alternativ information om en bild om användaren av någon anledning inte kan visa den (t ex pga av långsam anslutning, ett fel i src-attributet, eller om användaren använder en skärmläsare)." width="320" height="180">

Resultat:

style-attributet

Anger formateringen av ett element, t ex färg, typsnitt, storlek, etc.

Exempel:


                        <p style="color:red">Paragraf med röd text.</p>

Resultat:

Paragraf med röd text.

lang-attributet

Anges i <html>-taggen, anger språket för sidan och är viktigt för hjälpmedeslfunktioner som skärmläsare samt för sökmotorer. De första två bokstäverna "sv" anger språket och de två sista "SE" anger dialekten, om det finns någon.

Exempel med attributet markerat i rött:

                        
<!DOCTYPE html>
<html lang="sv-SE">
<body>
...
</body>
</html>

title-attributet

I exemplet nedan läggs <title>-attributet till <p>-elementet. Värdet i <title>-attributet kommer att visas som en text när man vilar muspekaren över paragrafen.

Exempel:


                            <p title="Text som visas med muspekaren över paragrafen.">

                                Paragraftext.

                            </p>

Resultat (vila muspekare på texten):

Paragraftext.

Gemener eller versaler?

HTML5-standarden säger inget om attributen ska skrivas med gemener eller vesaler utan det kan skrivas som <title> eller <TITLE>.

Däremot rekommenderar W3C att man använder gemener i HTML och kräver det i dokumenttyper som XHTML.

Citattecken eller ej?

HTML5-standarden kräver inte citattecken kring attributvärden, men det är rekommenderat att man använder sig av dem.

W3C rekommenderar cittatecken i HTML och kräver det för dokumenttyper som XHTML.

Som exemplen nedan visar så kan det fungera med eller utan cittatecken men när texten innehåller t ex mellanslag så kan det bli fel.

Utan cittatecken - undvik
<a href=https://www.w3schools.com>

Med citattecken - använd
<a href="https://www.w3schools.com">

Exemplet nedan kommer inte att visas korrekt eftersom det innehåller flera mellanslag, och redan det första mellanslaget kommer att göra att bara det första ordet "Text" visas i textrutan.

Exempel:

<p title=Text som visas när man vilar muspekaren på texten>Vila muspekaren på den här texten. Bara ordet "Text" visas i textrutan.</p>

Resultat:

Vila muspekaren på den här texten. Bara ordet "Text" visas i textrutan.

Använder man citattecken konsekvent så undviker man det problemet enligt exemplet nedan.

Exempel:

<p title="Text som visas när man vilar muspekaren på texten">Vila muspekaren på den här texten. Hela meningen visas i textrutan.</p>

Resultat:

Vila muspekaren på den här texten. Hela meningen visas i textrutan.

Enkla eller dubbla cittatecken?

Dubbla cittatecken kring attributvärden är vanligast inom HTML, men enkla citattecken används ibland.

I vissa situationer när attributvärdet innehåller dubbla cittatecken så måste man använda enkla citattecken.

I exemplet nedan vill vi ange smeknamnet inom citattecken. Anger man både attributet och smeknamnet inom dubbla cittatecken kommer det inte att fungera. Man måste använda enkla cittatecken på attributet och dubbla på smeknamnet.

Exempel:

<p title="Namn "Smeknamn" Efternamn">Vila muspekaren på den här texten. Bara "Namn" kommer att visas i textrutan.</p>

Resultat:

Vila muspekaren på den här texten. Bara "Namn" kommer att visas i textrutan.

Exempel:

<p title='Namn "Smeknamn" Efternamn'>Vila muspekaren på den här texten. "Namn", "Smeknamn" och "Efternamn" kommer att visas i textrutan.</p>

Resultat:

Vila muspekaren på den här texten. "Namn", "Smeknamn" och "Efternamn" kommer att visas i textrutan.