Nopsi: Bildern in einer Liste einen Link hinzufügen

Hallo Zusammen 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>

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?

MfG Nopsi

  1. @@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

    --
    “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
    1. Hallo,

      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.

      oder anders formuliert: du hast einen solchen Fehler gemacht und der verlinkte Validator hilft bei dieser Fehlersorte viel schneller als ein bzw. dieses Forum.

      Gruß
      Kalk

      1. Hallo Tabellenkalk,

        boah, seid ihr gemein. Es ist Advent, nicht Ostern!

        Kleiner Typo, große Wirkung. Einen Verständnisfehler würde ich ausschließen, weil dafür ein bestimmtes Zeichen fehlt.

        Aber es ist eins zu viel.

        <img src="..." />
        

        Das img Element ist eins der wenigen, die nur aus dem öffnenden Tag bestehen. Es kann keinen Inhalt haben. Darum muss man auch nicht die Schreibweise für ein leeres Element verwenden.

        <img src="...">
        

        Es gibt eine Ausnahme: Man möchte seine HTML Seiten mittels XSLT erzeugen und braucht deshalb die XHTML Schreibweise. Dann, und nur dann, sind Schreibweisen wie <img ... /> oder <br /> sinnvoll.

        Rolf

        --
        sumpsi - posui - obstruxi
        1. @@Rolf B

          boah, seid ihr gemein. Es ist Advent, nicht Ostern!

          So viel Heimlichkeit in der Weihnachtszeit … (Ist das Lied eigentlich auch im Westen bekannt? Zum anhören)

          <img src="..." />
          

          Das img Element ist eins der wenigen, die nur aus dem öffnenden Tag bestehen. Es kann keinen Inhalt haben. Darum muss man auch nicht die Schreibweise für ein leeres Element verwenden.

          Muss man nicht, kann man aber.

          Es gibt eine Ausnahme: Man möchte seine HTML Seiten mittels XSLT erzeugen und braucht deshalb die XHTML Schreibweise. Dann, und nur dann, sind Schreibweisen wie <img ... /> oder <br /> sinnvoll.

          Nein. Ich halte die polyglotte (XHTML-konforme) Schreibweise immer für sinnvoll. So sieht man am Code – ohne auf den Elementtypen zu schauen –, dass es zu diesem Element kein End-Tag gibt.

          Auf keinen Fall ist die Schreibweise falsch. HTML-Parser kommen mit dem / klar.

          😷 LLAP

          --
          “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
        2. Hallo,

          boah, seid ihr gemein.

          nö, wir haben auf die Existenz der Angel hingewiesen, während du meistens mit Körben voller Fische um dich wirfst…

          Gruß
          Kalk

          1. @@Tabellenkalk

            nö, wir haben auf die Existenz der Angel hingewiesen, während du meistens mit Körben voller Fische um dich wirfst…

            Man nennt ihn auch Verleihnix.

            😷 LLAP

            --
            “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
            1. Hallo Gunnar,

              der wirft die Fische aber einzeln. Damit der erfolglose Fischer seiner Frau nachher wenigstens sagen kann, dass er sie gefangen hat (die Fische).

              Und meine sind frisch!

              Rolf

              --
              sumpsi - posui - obstruxi
              1. @@Rolf B

                (die Fische).

                Und meine sind frisch!

                Du schreibst doch Fiesche mit IE. Und deine Fiesche sind nicht frisch!

                😷 LLAP

                --
                “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
                1. Hallo Gunnar,

                  MDR[1], touché.

                  Immerhin arbeitet mein Brötchengeber fleißig dran, die fIEsche um die verchromte Edge zu bringen. Bzw. an den Fox zu verfüttern.

                  Rolf

                  --
                  sumpsi - posui - obstruxi

                  1. ist kein öffentlich-rechtlicher Sender, sondern? 😉 ↩︎

      2. @@Tabellenkalk

        oder anders formuliert: du hast einen solchen Fehler gemacht und der verlinkte Validator hilft bei dieser Fehlersorte viel schneller als ein bzw. dieses Forum.

        Was auch hilft: Code formatieren:

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

        Hier dürfte der Syntaxfehler auffallen.

        Das Syntax-Highlighting gibt auch einen Hinweis.

        😷 LLAP

        --
        “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon