De HTML-taal bevat een aantal elementen. Deze omvatten veelgebruikte website componenten zoals alinea's, koppen, links en afbeeldingen. Er zijn ook een aantal nieuwere elementen die met HTML5 zijn geïntroduceerd, waaronder de koptekst, nav, voettekst en meer. Al deze HTML-elementen worden gebruikt om de structuur van een document te creëren en er betekenis aan te geven. Om nog meer betekenis aan elementen toe te voegen, kun je ze attributen geven.
Een eenvoudige HTML-openingstag begint met het -teken. De tag voor de openingsparagraaf zou bijvoorbeeld als volgt worden geschreven:
Een attribuut toevoegen aan uw HTML-tag, plaats je eerst een spatie achter de tagnaam (in dit geval is dat de "p"). Vervolgens voegt u de attribuutnaam toe die u wilt gebruiken, gevolgd door een gelijkteken. Ten slotte zou de attribuutwaarde tussen aanhalingstekens worden geplaatst. Bijvoorbeeld:
Tags kunnen meerdere attributen hebben. Je zou elk attribuut van de andere scheiden met een spatie.
Elementen met vereiste attributen
Sommige HTML-elementen hebben eigenlijk attributen nodig als u wilt dat ze werken zoals bedoeld. Het afbeeldingselement en het linkelement zijn hier twee voorbeelden van.
De afbeeldingselement vereist het attribuut "src". Dat attribuut vertelt de browser welke afbeelding u op die locatie wilt gebruiken. De waarde van het attribuut zou een bestandspad naar de afbeelding zijn. Bijvoorbeeld:
U zult merken dat we een ander attribuut aan dit element hebben toegevoegd, het "alt" of alternatieve tekstattribuut. Dit is technisch gezien geen verplicht kenmerk voor afbeeldingen, maar het is een goede gewoonte om deze inhoud altijd op te nemen voor toegankelijkheid. De tekst die wordt vermeld in de waarde van het alt-attribuut is wat wordt weergegeven als een afbeelding kan niet worden geladen om de een of andere reden.
Een ander element dat specifieke attributen vereist, is de anker- of linktag. Dit element moet het attribuut "href" bevatten, wat staat voor 'hypertext reference'. deze link zou moeten gaan." Net zoals het afbeeldingselement moet weten welke afbeelding moet worden geladen, moet de link-tag weten waar hij moet zijn naar. Hier is hoe een link-tag eruit kan zien:
Die link zou nu een persoon naar de website brengen die is gespecificeerd in de waarde van een attribuut. In dit geval is dit de hoofdpagina van Dotdash.
Attributen als CSS Hooks
Een ander gebruik van attributen is wanneer ze worden gebruikt als "haken" voor CSS-stijlen. Omdat webstandaarden dicteren dat u de structuur van uw pagina (HTML) gescheiden moet houden van de stijlen (CSS), gebruik je deze attribuuthaken in de CSS om te dicteren hoe de gestructureerde pagina op het web wordt weergegeven browser. U kunt dit stukje opmaak bijvoorbeeld in uw HTML-document hebben.
Als je wilde dat die divisie een achtergrondkleur had van zwart (#000) en een lettergrootte van 1.5em, dan zou je dit aan je CSS toevoegen:
.featured { achtergrondkleur: #000; lettergrootte: 1.5em;}
Het klasseattribuut "featured" fungeert als een hook die we in de CSS gebruiken om stijlen op dat gebied toe te passen. We zouden hier ook een ID-attribuut kunnen gebruiken als we dat wilden. Zowel klassen als ID's zijn universele attributen, wat betekent dat ze aan elk element kunnen worden toegevoegd. Ze kunnen ook allebei worden getarget met specifieke CSS-stijlen om het visuele uiterlijk van dat element te bepalen.
Betreffende Javascript
Ten slotte is het gebruik van attributen op bepaalde HTML-elementen ook iets dat u in Javascript kunt gebruiken. Als je een script hebt dat op zoek is naar een element met een specifiek ID-attribuut, dan is dat weer een ander gebruik van dit gemeenschappelijke deel van de HTML-taal.