HTML/Elemente/img
Aus SELFHTML-Wiki
Das img-Element ermöglicht es, Bilddateien in einem Dokument einzubinden und darzustellen.
- Syntax
- Start-Tag: notwendig
- End-Tag: verboten
- WAI‑ARIA‑Rolle
-
-
img
-
presentation
, falls es kein oder ein leeres alt-Attribut besitzt
-
- Elternelemente
- Darf vorkommen in:
- Elementen mit flow content
- Elementen mit phrasing content
- erlaubte Inhalte
- keine, leeres Element
Beispiel
<img src="selfhtml.png" alt="Selfhtml">
Beachten Sie: Verwenden Sie immer einen aussagefähigen Alternativtext, – für Nutzer, die Ihre Seiten nicht-visuell wahrnehmen (Screenreader) und falls das Bild aus irgendwelchen Gründen nicht geladen/angezeigt wird.
Empfehlung:
img, audio, video { max-width: 100% }
verhindert, dass Bilder (und andere Medien) bei schmalen Viewports größer als der verfügbare Platz dargestellt werden.Name | Inhalt | Standardwert | Bedeutung |
---|---|---|---|
Universalattribute | |||
id | ID | identifiziert ein einziges Element innerhalb eines Dokuments | |
class | Token | ordnet ein Element einer oder mehreren Klassen zu. | |
accesskey | Text (string) | Tastaturkürzel | |
contenteditable | Boolean | editierbarer Inhalt | |
dir | ltr, rtl | definiert die Schreibrichtung innerhalb des Dokuments | |
draggable | Boolean | kann mit Drag & Drop gezogen werden | |
hidden | Boolean | versteckter Inhalt | |
lang | Sprachkürzel | legt eine den IANA-Sprachdefinitionen folgende Sprache des Elementinhalts fest [RFC1766] | |
spellcheck | Boolean | Rechtschreibprüfung Sollte auch für input type="password" deaktiviert werden.
| |
style | String (Text) | notiert direkt in einem Element- style sheet data | |
tabindex | NUMBER | zeigt an, ob dieses Element fokusiert werden kann, ob es mithilfe der Tastaturnavigation angesteuert werden kann und in welcher Reihenfolge navigiert wird. | |
title | String (Text) | betitelt oder beschreibt ein Element. | |
alt | Text (string) | legt eine kurze Beschreibung des Bildes fest, die angezeigt wird, wenn das Bild aus irgendwelchen Gründen nicht angezeigt werden kann. | |
height | NUMBER | Höhe in CSS-Pixel. | |
ismap | Boolesches Attribut | gibt an, dass dieses Element Zugriff auf eine Server-seitige Image-Map bietet. | |
loading | auto, eager, lazy | auto | gibt an, ob Bilder bevorzugt oder erst später geladen werden sollen, wenn Seite gescrollt wird. (lazy-loading) |
src | URL | bestimmt die URI-Adresse des Bilds, das eingebettet werden soll. | |
srcset | URL | bestimmt die URI-Adressen und Größenfaktoren des Bilds, das eingebettet werden soll. | |
usemap | IDREF | Hash(#) Name des Map-Elements mit dem dieses Element in Verbindung steht. | |
width | NUMBER | Breite in CSS-Pixel. |
Attribut: Pflichtattribut
Attribut: optionales Attribut
Siehe auch
- Bilder im Internet
- SVG/Tutorials/responsive Imagemaps#HTML-Imagemap (mit area und map)
- JavaScript und Images
- Das HTML-Element
<img>
darf nicht mit dem SVG-Element<image>
verwechselt werden. Leider tragen die Browser hier zur Verwirrung bei, weil ein<image>
-Tag, das außerhalb eines<svg>
-Elements steht, als Alias für<img>
interpretiert wird und auch dessen Regeln folgt.
Weblinks
- Spezifikation (W3C): img-element