HTML- kenmerken
HTML-attributen bieden aanvullende informatie over HTML-elementen.
HTML-kenmerken
- Alle HTML-elementen kunnen attributen hebben
- Attributen bieden aanvullende informatie over elementen
- Attributen worden altijd gespecificeerd in de start-tag
- Attributen komen meestal in naam/waarde-paren zoals: name="value"
Het href-kenmerk
De <a>tag definieert een hyperlink. Het
hrefattribuut specificeert de URL van de pagina waar de link naartoe gaat:
Voorbeeld
<a href="https://www.w3schools.com">Visit W3Schools</a>
U leert meer over links in ons hoofdstuk HTML-links .
Het src-kenmerk
De <img>tag wordt gebruikt om een afbeelding in een HTML-pagina in te sluiten. Het srcattribuut specificeert het pad naar de afbeelding die moet worden weergegeven:
Voorbeeld
<img src="img_girl.jpg">
Er zijn twee manieren om de URL in het src
attribuut op te geven:
1. Absolute URL - Links naar een externe afbeelding die op een andere website wordt gehost. Voorbeeld: src="https://www.w3schools.com/images/img_girl.jpg" .
Opmerkingen: Externe afbeeldingen kunnen auteursrechtelijk beschermd zijn. Als u geen toestemming krijgt om het te gebruiken, overtreedt u mogelijk de auteursrechtwetten. Bovendien kunt u externe afbeeldingen niet bedienen; het kan plotseling worden verwijderd of gewijzigd.
2. Relatieve URL - Links naar een afbeelding die op de website wordt gehost. Hier bevat de URL niet de domeinnaam. Als de URL zonder schuine streep begint, is deze relatief ten opzichte van de huidige pagina. Voorbeeld: src="img_girl.jpg". Als de URL met een schuine streep begint, is deze relatief aan het domein. Voorbeeld: src="/images/img_girl.jpg".
Tip: Het is bijna altijd het beste om relatieve URL's te gebruiken. Ze gaan niet kapot als je van domein verandert.
De breedte en hoogte Attributen
De <img>tag moet ook de
attributen widthen bevatten
height, die de breedte en hoogte van de afbeelding specificeren (in pixels):
Voorbeeld
<img src="img_girl.jpg" width="500" height="600">
Het alt-kenmerk
Het vereiste altkenmerk voor de <img>
tag specificeert een alternatieve tekst voor een afbeelding, als de afbeelding om de een of andere reden niet kan worden weergegeven. Dit kan komen door een trage verbinding, of een fout in het srckenmerk, of als de gebruiker een schermlezer gebruikt.
Voorbeeld
<img src="img_girl.jpg" alt="Girl
with a jacket">
Voorbeeld
Kijk wat er gebeurt als we een afbeelding proberen weer te geven die niet bestaat:
<img src="img_typo.jpg" alt="Girl
with a jacket">
U leert meer over afbeeldingen in ons hoofdstuk HTML-afbeeldingen .
Het stijlkenmerk:
Het styleattribuut wordt gebruikt om stijlen aan een element toe te voegen, zoals kleur, lettertype, grootte en meer.
Voorbeeld
<p style="color:red;">This is a red paragraph.</p>
U leert meer over stijlen in ons hoofdstuk HTML-stijlen .
Het lang-attribuut
U moet het langattribuut altijd in de <html>tag opnemen om de taal van de webpagina aan te geven. Dit is bedoeld om zoekmachines en browsers te helpen.
In het volgende voorbeeld wordt Engels als taal gespecificeerd:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Landcodes kunnen ook worden toegevoegd aan de taalcode in het lang
attribuut. Dus de eerste twee tekens bepalen de taal van de HTML-pagina en de laatste twee tekens bepalen het land.
In het volgende voorbeeld wordt Engels als taal en Verenigde Staten als land aangegeven:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
U kunt alle taalcodes bekijken in onze HTML -taalcodereferentie .
De titel Attribuut
Het titleattribuut definieert wat extra informatie over een element.
De waarde van het title-attribuut wordt weergegeven als tooltip wanneer u met de muis over het element gaat:
Voorbeeld
<p title="I'm a tooltip">This is a paragraph.</p>
We stellen voor: gebruik altijd kleine letters
De HTML-standaard vereist geen attribuutnamen in kleine letters.
Het title-attribuut (en alle andere attributen) kan worden geschreven met hoofdletters of kleine letters, zoals title of TITLE .
W3C beveelt echter kenmerken in kleine letters aan in HTML en vereist kenmerken in kleine letters voor strengere documenttypen zoals XHTML.
Bij W3Schools gebruiken we attribuutnamen altijd in kleine letters.
We stellen voor: Altijd kenmerkwaarden citeren
De HTML-standaard vereist geen aanhalingstekens rond attribuutwaarden.
W3C beveelt echter aanhalingstekens in HTML aan en eist aanhalingstekens voor strengere documenttypen zoals XHTML.
Goed:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Slechte:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>Soms moet je aanhalingstekens gebruiken. In dit voorbeeld wordt het title-attribuut niet correct weergegeven, omdat het een spatie bevat:
Voorbeeld
<p
title=About W3Schools>
Bij W3Schools gebruiken we altijd aanhalingstekens rond attribuutwaarden.
Enkele of dubbele offertes?
Dubbele aanhalingstekens rond attribuutwaarden komen het meest voor in HTML, maar enkele aanhalingstekens kunnen ook worden gebruikt.
In sommige situaties, wanneer de attribuutwaarde zelf dubbele aanhalingstekens bevat, is het nodig om enkele aanhalingstekens te gebruiken:
<p title='John "ShotGun" Nelson'>
Of vice versa:
<p title="John 'ShotGun' Nelson">
Hoofdstuk samenvatting
- Alle HTML-elementen kunnen attributen hebben
- Het
hrefattribuut van<a>specificeert de URL van de pagina waar de link naartoe gaat - Het
srcattribuut van<img>specificeert het pad naar de afbeelding die moet worden weergegeven - De
widthenheightattributen van<img>geven informatie over de grootte van afbeeldingen - Het
altattribuut van<img>biedt een alternatieve tekst voor een afbeelding - Het
styleattribuut wordt gebruikt om stijlen aan een element toe te voegen, zoals kleur, lettertype, grootte en meer - Het
langattribuut van de<html>tag geeft de taal van de webpagina aan - Het
titleattribuut definieert wat extra informatie over een element
HTML-oefeningen
HTML-kenmerkreferentie
Een volledige lijst van alle attributen voor elk HTML-element staat in onze: HTML Attribute Reference .