Bildern in einer Liste einen Link hinzufügen

[Gunnar Bittersmann]

@@Nopsi

ich wollte bei den Bildern noch einen Link hinterlegen. so wie ich es jetzt hier unten habe funktioniert es allerdings nicht.

 <ul class="contant_icon">
 <li><img src="icon/fb.png" alt="icon" href="https://example.com" /></li>
 <li><img src="icon/tw.png" alt="icon" /></li>
 <li><img src="icon/twitch.png" alt="icon" /></li>
 <li><img src="icon/instagram.png" alt="icon" /></li>
 </ul>

Stimmt. Wenn die Bilder nicht geladen werden, dann steht da „icon icon icon icon“ – nicht wirklich hilfreich. Wenn jemand nicht/schwach sehen kann, liest der Scrennreader „icon icon icon icon“ vor – nicht wirklich hilfreich.

Als textuelle Alternative muss eine solche angegeben werden, die auch für sich aussagekräftig ist:

<ul class="contant_icon">
  <li><img src="icon/fb.png" alt="Facebook" /></li>
  <li><img src="icon/tw.png" alt="Twitter" /></li>
  <li><img src="icon/twitch.png" alt="Twitch" /></li>
  <li><img src="icon/instagram.png" alt="Instagram" /></li>
</ul>

ich wollte bei den Bildern noch einen Link hinterlegen. so wie ich es jetzt hier unten habe funktioniert es allerdings nicht.

 <li><img src="icon/fb.png" alt="icon" href="https://example.com" /></li>

In XHTML 2 hätte das funktioniert. Leider waren sich die Browserhersteller zu fein, die W3C-Spezifikation umzusetzen, und haben lieber ihr eigenes Süppchen gekocht: HTML5.

Allerdings wenn ich es so mache sind die Bilder auf der Webseite komplett verschwunden

 <li><a href="https://example.com" <img src="icon/fb.png" alt="icon"  /></a></li>

hat da jemand vielleicht ne Idee oder ne Lösung?

Schau doch mal, ob du keinen Fehler gemacht hast, z.B. ein Tag nicht geschlossen. Der Validator hilft dabei.

😷 LLAP