WMP Sites

Das HTML-Element <figure>: Visuelle Inhalte effektiv darstellen

Lukas Fuchs vor 8 Monaten in  HTML 3 Minuten Lesedauer

Was ist das HTML-Element <figure>?

Das HTML-Element <figure> ist ein semantisches Element, das dazu dient, visuelle Inhalte wie Bilder, Diagramme, Grafiken oder andere eingebettete Medien in einem Dokument zu gruppieren. Es bietet dir eine Möglichkeit, visuelle Inhalte vom Haupttext abzugrenzen und ihnen Kontext und Bedeutung zu verleihen.

Zwecke des <figure>-Elements

Das <figure>-Element hat mehrere wichtige Zwecke:

  • Gruppierung visueller Inhalte: Es fasst visuelle Elemente zu einer semantisch zusammenhängenden Einheit zusammen, die dann leichter als Ganzes bearbeitet und gestaltet werden kann.
  • Bereitstellung von Bildunterschriften: Durch die Verwendung des figcaption-Elements kannst du Bildunterschriften, Erklärungen oder andere ergänzende Informationen unterhalb deiner visuellen Inhalte hinzufügen.
  • Verbesserung der Barrierefreiheit: Das <figure>-Element bietet zusätzliche Informationen für Bildschirmlesegeräte, die es sehbehinderten Nutzern ermöglichen, deine visuellen Inhalte leichter zu verstehen.
  • Unterstützung responsiver Layouts: Durch die Gruppierung visueller Inhalte können sie leichter in responsiven Layouts auf unterschiedlichen Bildschirmgrößen angezeigt werden.

Verwendung des Elements

für visuelle Inhalte

Das HTML-Element <figure> ist ein semantisches Tag, das verwendet wird, um visuelle Inhalte wie Bilder, Diagramme oder Grafiken einzurahmen. Durch die Verwendung von <figure> kannst du diese Inhalte auf eine strukturierte und barrierefreie Weise darstellen.

Strukturierung visueller Inhalte

Mithilfe von <figure> kannst du visuelle Inhalte in logische Blöcke unterteilen. Das Element verfügt über die folgenden Tegelemente:

  • <figcaption>: Bietet eine Bildunterschrift oder eine kurze Beschreibung des visuellen Inhalts.
  • <figurecontent>: Enthält den eigentlichen visuellen Inhalt, z. B. ein Bild, ein Diagramm oder eine Grafik.

Vorteile der Strukturierung

Die Strukturierung visueller Inhalte bietet mehrere Vorteile:

  • Verbesserte Zugänglichkeit: Bildunterschriften und Beschreibungen erleichtern Menschen mit Sehbehinderungen den Zugriff auf visuelle Inhalte.
  • Suchmaschinenoptimierung: Bildunterschriften und alternativer Text helfen Suchmaschinen, visuelle Inhalte zu indizieren und zu verstehen.
  • Verbesserte Nutzerfreundlichkeit: Gut strukturierte Inhalte sind für Benutzer einfacher zu scannen und zu verstehen.

Richtige Verwendung

Um das Element <figure> für visuelle Inhalte richtig zu verwenden, solltest du folgende Richtlinien beachten:

  • Verwende <figure> für zusammengehörige visuelle Inhalte: Gruppiere verwandte Inhalte in einer einzigen <figure>-Struktur.
  • Verwende <figcaption> für Bildunterschriften: Stelle zusätzliche Informationen oder Beschreibungen in der <figcaption>-Struktur bereit.
  • Verwende alternativen Text für Bilder: Verwende das Attribut alt für Bilder, um einen alternativen Text für Benutzer bereitzustellen, die Bilder nicht sehen können.
  • Gestalte deine Inhalte responsiv: Verwende CSS, um sicherzustellen, dass deine visuellen Inhalte auf verschiedenen Geräten korrekt angezeigt werden.

Vorteile des Elements

Das HTML-Element <figure> bietet mehrere Vorteile, die dir die Darstellung visueller Inhalte auf deiner Website erleichtern:

Zentralisierte Kapsel für visuelle Inhalte

<figure> definiert einen dedizierten Bereich auf deiner Seite, der für visuelle Inhalte wie Bilder, Diagramme oder Tabellen reserviert ist. Diese Kapselung erleichtert es dir, visuelle Elemente zu gruppieren und einen konsistenten visuellen Stil auf deiner gesamten Website aufrechtzuerhalten.

Für weitere Informationen, siehe auch: Die Allmacht der ID in HTML: Ultimative Anleitung zur Element-Identifizierung

Verbesserte Semantik und Barrierefreiheit

<figure> verleiht visuellen Inhalten eine semantische Struktur, indem es sie als Figuren kennzeichnet. Dies verbessert die Barrierefreiheit deiner Website für Personen mit Sehbehinderungen und macht den Inhalt für Suchmaschinen verständlicher.

Flexibles Layout

Mit <figure> kannst du visuelle Inhalte flexibel auf deiner Seite anordnen. Du kannst CSS verwenden, um die Ausrichtung, Größe und Beschriftung anzupassen, wodurch du ein ansprechendes und benutzerfreundliches Design erstellen kannst.

Dokumentenfluss beibehalten

Im Gegensatz zu anderen Elementen wie <div> behält <figure> den Dokumentenfluss bei. Das bedeutet, dass Text und andere Elemente um die Figur herumfließen, sodass du visuelle Inhalte nahtlos in deinen Inhalt integrieren kannst.

Verbesserte Zugänglichkeit

<figure> verfügt über native Unterstützung für Barrierefreiheitsfunktionen wie Alternativtexte und Beschriftungen. Dies stellt sicher, dass visuelle Inhalte für alle Nutzer zugänglich sind, unabhängig von ihren Fähigkeiten.

Unterschiede zwischen <figure> und <img>

Das Element <img> dient ausschließlich zur Darstellung eines Bildes, während <figure> eine umfassendere semantische Bedeutung für visuelle Inhalte bietet. Die folgenden Unterschiede verdeutlichen den unterschiedlichen Zweck dieser Elemente:

Für mehr Details, lies auch: HTML-Tabellenüberschriften: Erstellen klarer und informativer Tabellen

Semantischer Unterschied

<figure>:

  • Definiert einen eigenständigen Block von visuellem Inhalt, der eine Bildunterschrift, einen Titel oder andere relevante Informationen enthalten kann.
  • Bietet eine semantische Struktur für Bildschirmlesegeräte und andere Hilfstechnologien, um den Inhalt präzise zu beschreiben.

<img>:

  • Stellt lediglich ein Bild dar, ohne weitere semantische Bedeutung.

Inhalt

<figure>:

  • Kann ein beliebiges visuelles Element enthalten, wie z. B. Bilder, Grafiken, Diagramme, Videos oder interaktive Inhalte.
  • Ermöglicht die Verwendung einer Bildunterschrift oder eines Titels, um zusätzliche Informationen bereitzustellen.

<img>:

  • Kann nur Bilder darstellen.

Gruppierung

<figure>:

  • Gruppiert visuelle Inhalte zusammen, wodurch Querverweise und die Erstellung von Galerien erleichtert werden.
  • Ermöglicht die Erstellung komplexerer visueller Layouts.

<img>:

  • Ist ein eigenständiges Element und kann nicht mit anderen visuellen Elementen gruppiert werden.

Barrierefreiheit

<figure>:

  • Bietet eine bessere Barrierefreiheit, da Bildschirmleser und andere Hilfstechnologien den Inhalt genau beschreiben können.
  • Ermöglicht die Verwendung alternativer Textbeschreibungen für Bilder.

<img>:

  • Kann für Benutzer mit eingeschränkten Sehfähigkeiten weniger zugänglich sein, da Bildschirmleser möglicherweise nur den Dateinamen des Bildes lesen können.

Insgesamt bietet das Element <figure> eine umfassendere und semantischere Darstellung visueller Inhalte als <img>. Es ermöglicht eine bessere Gruppierung, Flexibilität bei der Inhaltsdarstellung und eine verbesserte Barrierefreiheit.

Barrierefreiheit von

Als Webentwickler ist es entscheidend, dass deine Websites für alle Nutzer zugänglich sind, unabhängig von ihren Fähigkeiten. Das Element <figure> kann eine wertvolle Möglichkeit sein, die Barrierefreiheit visueller Inhalte zu verbessern.

Semantische Bedeutung

Das Element <figure> bietet eine semantische Bedeutung für visuelle Inhalte, die von assistierenden Technologien wie Bildschirmlesegeräten interpretiert werden kann. Dies ermöglicht es Nutzern, den Inhalt einer Abbildung ohne visuelle Hinweise zu verstehen.

Bildunterschriften

Bildunterschriften sind ein wesentlicher Bestandteil der Barrierefreiheit. Sie bieten eine textliche Beschreibung des Bildinhalts und können von Bildschirmlesegeräten vorgelesen werden. Mit dem Element <figure> kannst du eine Bildunterschrift mithilfe des Elements <caption> hinzufügen.

Alternativtexte

Alternativtexte sind eine weitere wichtige Methode, um die Barrierefreiheit zu gewährleisten. Sie liefern Nutzern eine textuelle Beschreibung des Bildinhalts, wenn dieses nicht angezeigt werden kann. Verwende das Attribut alt des Elements <img> innerhalb der Figur, um einen Alternativtext hinzuzufügen.

Siehe auch: Effizientes Einrücken von HTML-Text: Ein Leitfaden für sauberen und strukturierten Code

Tastaturnavigation

Stelle sicher, dass Nutzer mit Tastaturen auf alle Elemente innerhalb der Figur zugreifen können. Verwende Tab-Indexe oder ARIA-Rollen, um die Tastaturnavigation zu ermöglichen.

Kontrast

Stelle ausreichenden Kontrast zwischen dem Text der Bildunterschrift und dem Hintergrund sicher. Dies ist besonders wichtig für Nutzer mit Sehbehinderungen.

Best Practices für die Barrierefreiheit von

  • Verwende semantisch korrekte Elemente wie <figure> und <caption>.
  • Füge immer Bildunterschriften und Alternativtexte hinzu.
  • Stelle ausreichenden Kontrast zwischen Text und Hintergrund sicher.
  • Ermögliche die Tastaturnavigation für alle Elemente innerhalb der Figur.
  • Teste deine Website mit Bildschirmlesegeräten, um sicherzustellen, dass sie für Nutzer mit Sehbehinderungen zugänglich ist.

Best Practices für die Verwendung von

Beim Einsatz des HTML-Elements

solltest du folgende Best Practices beachten:

Inhalte beschreibende Titel verwenden

Verwende die <caption>-Unterzeile, um den Inhalt der Abbildung kurz und prägnant zu beschreiben. Dies verbessert die Barrierefreiheit, indem es Screenreadern und anderen Hilfsmitteln hilft, die Bedeutung der visuellen Inhalte zu vermitteln.

Alternativtext angeben

Stelle sicher, dass du einen aussagekräftigen Alternativtext für die Abbildung angibst, indem du das alt-Attribut verwendest. Dies ist unerlässlich, um die Zugänglichkeit für Benutzer zu gewährleisten, die die Abbildung nicht anzeigen können, z. B. aufgrund von Sehbehinderungen oder langsamen Internetverbindungen.

Bildunterschriften einfügen

Falls erforderlich, füge Bildunterschriften zur Abbildung hinzu, indem du das figcaption-Element verwendest. Dies bietet zusätzlichen Kontext oder Informationen zur Abbildung, die nicht unbedingt aus dem Titel oder dem Alternativtext hervorgehen.

Für nähere Informationen besuche: Link-HTML: So fügen Sie Hyperlinks in Ihre Website ein

Hochwertige Bilder verwenden

Verwende hochwertige Bilder, die klar und für das jeweilige Gerät oder die Bildschirmgröße optimiert sind. Dies verbessert die Benutzererfahrung und sorgt für eine bessere Darstellung deiner visuellen Inhalte.

Responsive Bilder verwenden

Verwende responsive Bilder, um sicherzustellen, dass deine Abbildungen auf allen Geräten und Bildschirmgrößen angemessen dargestellt werden. Du kannst moderne Techniken wie srcset und sizes verwenden, um Bilder für unterschiedliche Auflösungen bereitzustellen.

Barrierefreiheit beachten

Stelle sicher, dass deine Verwendung des

-Elements den Web Accessibility Guidelines entspricht. Dies umfasst die Bereitstellung von Alternativtext, die Verwendung von <caption> und figcaption für die Beschreibung von Inhalten und die Sicherstellung, dass die Abbildungen über einen angemessenen Kontrast zum Hintergrund verfügen.

Unterstützung und Kompatibilität von

Das HTML-Element

wird von fast allen modernen Browsern unterstützt, darunter:

  • Google Chrome
  • Mozilla Firefox
  • Microsoft Edge
  • Safari
  • Opera

Kompatibilität mit älteren Browsern

Ältere Browser wie Internet Explorer 8 und früher unterstützen das Element

nicht. Wenn du sicherstellen möchtest, dass dein Inhalt in diesen Browsern korrekt dargestellt wird, kannst du CSS-Fallbacks verwenden.

figure {
  display: block;
  margin: 1em;
  padding: 1em;
  border: 1px solid #ccc;
}

figure img {
  display: block;
  margin: 0 auto;
}

/* Fallback für Internet Explorer 8 und früher */
.ie8 figure {
  display: inline;
}

Browsererweiterungen

Zusätzlich zur nativen Unterstützung durch Browser existieren Browsererweiterungen, die die Funktionalität des Elements

verbessern können. Beispielsweise bietet die Erweiterung "Figure Plus" für Firefox zusätzliche Optionen zur Anpassung des Erscheinungsbilds von Bildern und Bildunterschriften.

Barrierefreiheit

Das Element

ist von Natur aus barrierefrei und unterstützt assistive Technologien wie Bildschirmlesegeräte, die den Inhalt für Benutzer mit Sehbehinderungen vorlesen können. Dies ist wichtig, um die Zugänglichkeit deiner Website zu gewährleisten.

Weitere Informationen findest du unter: HTML Embed: Den reibungslosen Einbau von Inhalten von Drittanbietern meistern

Zusammenfassend:

Das HTML-Element

wird von allen modernen Browsern unterstützt, und es gibt Fallbacks für ältere Browser. Außerdem gibt es Browsererweiterungen, die die Funktionalität von
erweitern können. Das Element ist außerdem barrierefrei, was die Zugänglichkeit deiner Website verbessert.

Verwandte Artikel

Folge uns

Neue Posts

Beliebte Posts