HTML-språket innehåller ett antal element. Dessa inkluderar vanligt förekommande webbplatsens komponenter som stycken, rubriker, länkar och bilder. Det finns också ett antal nyare element som introducerades med HTML5, inklusive sidhuvud, nav, sidfot och mer. Alla dessa HTML-element används för att skapa strukturen i ett dokument och ge det mening. För att lägga till ännu mer betydelse för elementen kan du ge dem attribut.
En grundläggande HTML-öppningstagg börjar med karaktären. Till exempel skulle inledningsavsnittstaggen skrivas så här:
För att lägga till ett attribut till din HTML-tagg, sätter du först ett mellanslag efter taggnamnet (i det här fallet är det "p"). Sedan skulle du lägga till attributnamnet som du vill använda följt av ett likhetstecken. Slutligen placeras attributvärdet i citattecken. Till exempel:
Taggar kan ha flera attribut. Du skulle separera varje attribut från de andra med ett mellanslag.
Element med obligatoriska attribut
Vissa HTML-element kräver faktiskt attribut om du vill att de ska fungera som avsett. Bildelementet och länkelementet är två exempel på detta.
De bildelement kräver attributet "src". Attributet berättar webbläsaren vilken bild du vill använda på den platsen. Värdet på attributet skulle vara en filsökväg till bilden. Till exempel:
Du kommer att märka att vi har lagt till ett annat attribut till detta element, "alt" eller alternativt attribut. Detta är tekniskt inte ett obligatoriskt attribut för bilder, men det är en bästa praxis att alltid inkludera detta innehåll för tillgänglighet. Texten som anges i värdet på alt-attributet är vad som visas om en bilden går inte att läsa in av någon anledning.
Ett annat element som kräver specifika attribut är ankaren eller länktaggen. Detta element måste innehålla attributet "href", som står för "hypertextreferens." Det är ett snyggt sätt att säga "var den här länken ska gå. "Precis som bildelementet behöver veta vilken bild som ska laddas måste länktaggen veta var den ska gilla till. Så här kan en länktagg se ut:
Den länken skulle nu föra en person till webbplatsen som anges i värdet på ett attribut. I det här fallet är det huvudsidan för Dotdash.
Attribut som CSS-krokar
En annan användning av attribut är när de används som "krokar" för CSS-stilar. Eftersom webbstandarder dikterar att du ska hålla sidans struktur (HTML) åtskild från dess stilar (CSS) använder du dessa attributkrokar i CSS för att diktera hur den strukturerade sidan kommer att visas på webben webbläsare. Till exempel kan du ha den här markeringen i ditt HTML-dokument.
Om du vill att den uppdelningen ska ha en svart bakgrundsfärg (# 000) och en fontstorlek på 1,5 em skulle du lägga till den i din CSS:
.featured {bakgrundsfärg: # 000; teckenstorlek: 1,5 em;}
Klassattributet "featured" fungerar som en krok som vi använder i CSS för att tillämpa stilar på det området. Vi kan också använda ett ID-attribut här om vi vill. Både klasser och ID är universella attribut, vilket innebär att de kan läggas till valfritt element. De kan också båda riktas in med specifika CSS-stilar för att bestämma det elementets visuella utseende.
När det gäller Javascript
Slutligen är att använda attribut på vissa HTML-element också något du kan använda i Javascript. Om du har ett skript som letar efter ett element med ett specifikt ID-attribut, är det ännu en användning av denna vanliga del av HTML-språket.