HTML-sproget indeholder et antal elementer. Disse inkluderer almindeligt anvendte websteds komponenter som afsnit, overskrifter, links og billeder. Der er også et antal nyere elementer, der blev introduceret med HTML5, herunder sidehoved, nav, sidefod med mere. Alle disse HTML-elementer bruges til at skabe strukturen i et dokument og give det mening. For at tilføje endnu mere mening til elementer kan du give dem attributter.
Et grundlæggende HTML-åbningstag begynder med tegnet <. dette efterf af tagnavnet og til sidst udfylder du tagget med> tegnet. Eksempelvis vil det indledende afsnitstag blive skrevet således:
For at tilføje en attribut til din HTML-tag, sætter du først et mellemrum efter tagnavnet (i dette tilfælde er det "p"). Derefter tilføjer du det attributnavn, du vil bruge, efterfulgt af et lighedstegn. Endelig placeres attributværdien i anførselstegn. For eksempel:
Mærker kan have flere attributter. Du adskiller hver attribut fra de andre med et mellemrum.
Elementer med krævede attributter
Nogle HTML-elementer kræver faktisk attributter, hvis du vil have dem til at fungere som beregnet. Billedelementet og linkelementet er to eksempler på dette.
Det billedelement kræver attributten "src". Denne attribut fortæller browseren, hvilket billede du vil bruge på det sted. Værdien af attributten ville være en filsti til billedet. For eksempel:
Du vil bemærke, at vi tilføjede en anden attribut til dette element, "alt" eller den alternative tekstattribut. Dette er teknisk set ikke en påkrævet attribut for billeder, men det er en god praksis at altid medtage dette indhold for tilgængelighed. Den tekst, der er anført i værdien af alt-attributten, er, hvad der vises, hvis en billedet kan ikke indlæses af en eller anden grund.
Et andet element, der kræver specifikke attributter, er anker- eller linktagget. Dette element skal indeholde attributten "href", som står for 'hypertekstreference.' Det er en smuk måde at sige "hvor dette link skal gå. "Ligesom billedelementet skal vide, hvilket billede der skal indlæses, skal linktagget vide, hvor det skal kunne lide til. Sådan ser et link-tag ud:
Dette link bringer nu en person til det websted, der er angivet i værdien af en attribut. I dette tilfælde er det hovedsiden for Dotdash.
Attributter som CSS-kroge
En anden brug af attributter er, når de bruges som "kroge" til CSS-stilarter. Fordi webstandarder dikterer, at du skal holde din sides struktur (HTML) adskilt fra dens stilarter (CSS), bruger du disse attributkroge i CSS til at diktere, hvordan den strukturerede side vises på nettet browser. For eksempel kan du have dette stykke markering i dit HTML-dokument.
Hvis du ville have, at divisionen havde en baggrundsfarve på sort (# 000) og en skriftstørrelse på 1.5 em, tilføjede du dette til din CSS:
.featured {baggrundsfarve: # 000; skriftstørrelse: 1.5em;}
Klasseattributten "featured" fungerer som en krog, som vi bruger i CSS til at anvende stilarter på dette område. Vi kunne også bruge en ID-attribut her, hvis vi ville. Både klasser og ID'er er universelle attributter, hvilket betyder, at de kan føjes til ethvert element. De kan også begge målrettes med specifikke CSS-stilarter for at bestemme elementets visuelle udseende.
Med hensyn til Javascript
Endelig er brug af attributter på bestemte HTML-elementer også noget, du kan bruge i Javascript. Hvis du har et script, der leder efter et element med en bestemt ID-attribut, er det endnu en brug af dette almindelige stykke af HTML-sproget.