Een webpagina is in HTML opgebouwd uit elementen. Deze elementen bestaan uit tags, attributen en inhoud. Een attribuut geeft extra informatie mee aan een tag. Denk hierbij aan de locatie van een afbeelding of video, maar ook aan het formaat ervan. Onderstaand voorbeeld laat dit goed zien:
<!DOCTYPE html>
<html>
<head>
<title>Paginatitel</title>
</head>
<body>
<h1>Je eerste heading</h1>
<p>Je eerste alinea.</p>
<img src="afbeelding.jpg" alt="alternatieve titel" height="60" width="80">
</body>
</html>
Bovenstaand voorbeeld bestaat uit verschillende elementen. De volledige inhoud staat tussen <html> en </html>.
Op dezelfde manier zie je het <head>-element en het <title>-element terug.
Een element wordt aangegeven door middel van tags. Meestal zijn dit een openingstag (zoals <html>) en een sluitingstag (zoals </html>).
Er zijn echter uitzonderingen. De <img>-tag bijvoorbeeld heeft geen sluitingstag, maar bevat wel meerdere attributen zoals de afbeeldingslocatie,
alternatieve tekst, hoogte en breedte. Deze tag vertelt de webbrowser dat er een afbeelding moet worden weergegeven.
Het attribuut src="..." geeft de locatie van de afbeelding aan, in dit geval "afbeelding.jpg", wat betekent dat de afbeelding zich in dezelfde map bevindt
als het HTML-bestand. Heb je je afbeeldingen in een aparte map geplaatst, dan moet je dat in het pad aangeven:
<img src="afbeeldingen-map/afbeelding.jpg" alt="alternatieve titel" height="60" width="80">
Let op: tussen de woorden afbeeldingen en map staat een koppelteken in plaats van een spatie. Probeer spaties in bestands- en mapnamen te vermijden wanneer je online werkt. In een URL worden spaties weergegeven als %20. Een bestand met de naam Mijn Afbeelding.jpg wordt dan bijvoorbeeld weergegeven als Mijn%20Afbeelding.jpg, wat als een andere bestandsnaam wordt gezien. Hierdoor kan de afbeelding niet worden gevonden of geladen. Hetzelfde geldt voor mappenamen:
<img src="afbeeldingen map/afbeelding.jpg" alt="alternatieve titel" height="60" width="80">
In dit voorbeeld probeert de browser het bestand te vinden op de locatie afbeeldingen%20map/afbeelding.jpg, wat niet bestaat. Hierdoor zal de afbeelding niet worden weergegeven. Dit kan ook gebeuren bij HTML-bestanden, video's en andere mediabestanden.
Na de afbeeldingslocatie komt het alt-attribuut, dat een alternatieve tekst weergeeft als de afbeelding niet geladen kan worden. Maar dit is niet de enige functie: zoekmachines kunnen geen afbeeldingen 'zien' zoals mensen dat kunnen. De alternatieve tekst helpt zoekmachines te begrijpen wat er op een afbeelding staat. Door afbeeldingen te optimaliseren voor zoekmachines, kun je dus een SEO-voordeel behalen.
Tot slot zie je in het voorbeeld de attributen height en width, die de hoogte en breedte van de afbeelding bepalen. Als er geen eenheid wordt gespecificeerd, worden deze waarden geïnterpreteerd als pixels. Houd er rekening mee dat de daadwerkelijke weergavegrootte op verschillende apparaten kan verschillen.
<img src="afbeeldingen-map/afbeelding.jpg" alt="alternatieve titel" height="20%" width="30%">
Het gebruik van percentages voor de grootte is ook mogelijk en werkt vaak beter dan vaste pixelwaarden, maar is nog niet ideaal. Daarom wordt er voor de meeste moderne websites gebruikgemaakt van een zogenaamd CSS-bestand.
Meer voorbeeldenAttributen
<!DOCTYPE html>
<html>
<head>
<title>Paginatitel</title>
</head>
<body>
<h1>Je eerste heading</h1>
<p style="color:black">Je eerste alinea maar wel in zwart.</p>
<a href="eigen-website.php">Een eigen website</a>
<img src="afbeelding.jpg" alt="alternatieve titel" height="60" width="80">
<!-- Extra info die niet zichtbaar zal zijn op de webpagina voor de gebruiker -->
</body>
</html>
Dat waren een paar simpele voorbeelden. In plaats van kleurnamen zoals "black" kun je ook kleurcodes gebruiken om woorden in allerlei andere kleuren weer te geven:
<!DOCTYPE html>
<html>
<head>
<title>Paginatitel</title>
</head>
<body>
<p style="color:black">Je eerste alinea maar wel in zwart.</p>
<p style="color:#FF0080">Je eerste alinea maar nu in roze.</p>
<p style="color:#C8FE2E">Je eerste alinea maar nu in limoengroen/geel.</p>
<a href="https://html-color-codes.info/" target="_blank" rel="nofollow">Hier vind je kleurcodes</a>
</body>
</html>
Zoals je ziet heeft de hyperlink (klikbare tekst naar een andere pagina) hier ook een extra attribuut gekregen. Het attribuut target="_blank" vertelt de webbrowser dat de gelinkte pagina moet openen in een nieuw tabblad. Door rel="nofollow" toe te voegen, geef je bovendien aan dat zoekmachines deze link niet moeten volgen (handig bij externe links).
SEO Academy