img und float
<Tags> für Bilder

HTMLBedeutung
<img>Lädt ein Bild und bietet dafür weitere Funktionen die über die Attribute zugewiesen werden. IMG steht für Image. Die wesentlichen Attribute sind: SRC, TITLE, ALT und CLASS.
<figure>Definiert als Container alle Elemente, z.B. erklärende Überschrift mit Text, für eine konkrete Abbildung.
<figcaption>Bildbeschreibung innerhalb von <figure>.

Attribute für <img>

AttributBedeutung
src=""Pfadangabe für das dargestellte Element. Die SRC (Source, Quellenangabe) kann mit einem absoluten oder relativen Pfad zu der Datei (z.B. .MP3, .OGG, .MP4 etc,) verweisen. Absolute Pfade sind vom Standort des eigenen Dokument unabhängig. Relative Pfade sind abhängig. Relative Pfade wie z. B. "sound/beep.mp3" sind oftmals flexibler (gehe in den Ordner sound und nimm dort beep.mp3). Letztlich werden beide Pfadkonzepte benötigt. Das Protokoll der Pfade kann neben HTTP z.B. auch HTTPS:// sein.
alt=""Alternativ Text der den Inhalt beschreibt, z.B. für einen Blinden-Screenreader oder als Fallback-Text, wenn ein Medium nicht geladen werden kann.
title=""Mouseover Information mit Angaben zu dem Inhalt. Dies spielt auch bei Suchmaschinen eine Rolle. Wobei die Suchmaschine den Verbund aus Dateiname, TITLE, ALT und umgebenden Text interpretiert.
class=""CSS-Klassen für die Gestaltung mit CSS Eigenschaften. Klassen können mehrfach im Dokument verwendet werden. Ein Element kann außerdem mehrere Klassen haben. Alle Eigenschaften der auf ein Element angewendeten Klassen werden addiert. Es gilt dann immer die letzte Eigenschaft, sollten sich Eigenschaften überschreiben. Ein modularer Aufbau der Klassen und konsequente sowie verständliche Namensgebung ist empfohlen.
id=""ID für die eindeutige Identifizierung des Element. Mit ID sollten Funktionen wie z.B. Verlinkung oder Skripte gesteuert werden. Für das Styling sind CSS-Klassen empfohlen.
width=""Breite des Elements. Man sollte über CSS, z.B. mit einer CLASS, das Element gestalten. Die Verwendung des Attributs width ist nicht zu empfehlen.
height=""Höhe des Elements. Man sollte über CSS, z.B. mit einer Class, das Element gestalten. Die Verwendung des Attributs height ist nicht zu empfehlen.
ismap=""Definiert das Bild als serverseitige Image-Map. Koordinaten werden als URL übergeben und funktioniert nur in Kombination mit <a>
usemap=""Definiert das Bild als clienseitige Image-Map

► Weitere Infos

Externe Quellen

Kompatibilität

Bilder in den gängigen Internet-Dateiformaten (JPEG, GIF, PNG) werden von allen gängigen Browsern dargestellt.

http://caniuse.com/#feat=html5semantic

Die Unterstützung für die semantischen HTML 5 Eigenschaften, auf Bilder bezogen ist das z.B. <figure> <figcaption> durch die heute gängigen Browser ist sehr gut.


W3C HTML 4.01 Specification

13.2 Including an image: the IMG element

Original Spezifikation der W3C für das <img> in englischer Sprache aus dem Jahre 1999.


W3C Graphics on the Web

Graphics on the Web

Original Spezifikation der W3C für Grafiken in englischer Sprache aus dem Jahre 1995.


Grafiken auf selfhtml.wiki

http://wiki.selfhtml.org(...)Grafiken

Umfangreiche Erklärung in deutscher Sprache.


The figure & figcaption elements

http://html5doctor.com/the-figure-figcaption-elements/

Artikel über die semantischen Elemente <figure> <figcaption>.