Er is een verschil tussen het invoegen van een afbeelding op een webpagina en van die afbeelding een klikbare link te maken. Hoewel de HTML is vergelijkbaar, een link is gebaseerd op een anker element terwijl een afbeelding de. gebruikt img element. Een afbeelding kan echter nesten in een anker, waardoor die afbeelding klikbaar wordt als een link.
Afbeeldingen invoegen in ankerelementen
Een veelgebruikt gebruik van een op afbeeldingen gebaseerde link is de afbeelding van het logo van de site, die vervolgens wordt teruggekoppeld naar de startpagina van de site.
Zo plaatst u een niet-klikbare afbeelding in het HTML-document:
Om de afbeelding om te zetten in een link, voegt u de ankerlink toe, opent u het ankerelement vóór de afbeelding en sluit u het anker na de afbeelding. Deze techniek is vergelijkbaar met hoe u tekst koppelt, behalve dat u de afbeelding in plaats van de woorden omwikkelt:
Wanneer u dit type HTML aan uw pagina toevoegt, plaats dan geen spaties tussen de ankertag en de afbeeldingstag. Als je dat doet, zullen sommige browsers kleine vinkjes naast de afbeelding toevoegen, wat er vreemd uitziet.
Het logo fungeert nu ook als startknop, wat tegenwoordig zo'n beetje een webstandaard is.
Merk op dat we geen visuele stijlen, zoals de breedte en hoogte van de afbeelding, opnemen in onze HTML-opmaak. We laten deze visuele stijlen over aan CSS en handhaven een duidelijke scheiding van HTML-structuur en CSS-stijlen.