Das HTML-Element <figure>: Visuelle Inhalte effektiv darstellen
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
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
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
Unterstützung und Kompatibilität von
Das HTML-Element
- 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
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
Barrierefreiheit
Das Element
Weitere Informationen findest du unter: HTML Embed: Den reibungslosen Einbau von Inhalten von Drittanbietern meistern
Zusammenfassend:
Das HTML-Element
Verwandte Artikel
- Das
- Benutzerdefinierte HTML-Tags: Anleitung zum Erstellen einzigartiger Elemente
- HTML-Navigation: Die Kunst, Benutzer effektiv durch Ihre Website zu führen
- DIV-Container: Der ultimative Leitfaden zur Strukturierung von Webinhalten
- Gestalte die perfekte HTML-Navigationsleiste für deine Website
- Der HTML-Footer: Ein unverzichtbarer Abschnitt, der oft übersehen wird
- Anchor-Tags in HTML: So erstellst du Hyperlinks
- BR HTML: Der unterschätzte Zeilenumbruch
- HTML -Tag: Hervorhebung mit Stil
- HTML-Generator: Erstellen Sie mühelos ansprechende Websites
- HTML Shy: Versteckter Text für spezielle Fälle
- HTML-Navigationsleistenvorlagen: Erstellen von benutzerfreundlichen und ansprechenden Menüs
Neue Posts
Node.js NVM: Antworten auf die häufigsten Fragen
Entwicklung
Professionelle Gmail-HTML-Signaturen: Erstellen, Gestalten und Nutzen
Marketingstrategien
Die vollständige Anleitung zu poczta wp: Alles, was Sie wissen müssen
Sicherheit und Datenschutz
HTML-Content: Der ultimative Leitfaden zur Erstellung ansprechender Webseiten
SEO-Optimierung
Das HTML-Title-Attribut: Ein Leitfaden zur Optimierung von Titeln für SEO und Benutzerfreundlichkeit
Online-Marketing
HTTP-Statuscodes: Ihre Bedeutung und Verwendung im Web
Einführung in HTTP-Statuscodes
Besucherzähler für Websites: Tracking Ihres Website-Traffics für Erfolg
SEO-Optimierung
Beschleunigen Sie die Dateneingabe mit HTML Datalist
Webentwicklung
HTML in PUG konvertieren: Einfach und schnell gemacht
Webentwicklung
HTML Section vs. Div: Die entscheidenden Unterschiede und wann man was verwendet
Webentwicklung
Beliebte Posts
World of Warcraft auf Linux spielen: Eine guide für Abenteurer
Einführung in World of Warcraft
SteamCMD: Der umfassende Leitfaden zur Verwaltung von Steam-Servern
Sicherheitsrichtlinien
POST-Anfragen: Erstellen, Senden und Empfangen von Daten im Web
Webentwicklung
LaTeX: Das mächtige Werkzeug für hochwertiges Dokumentenschreiben
Dokumentenerstellung
Die vollständige Anleitung zu poczta wp: Alles, was Sie wissen müssen
Sicherheit und Datenschutz
Wiederherstellung beschädigter Linux-Dateisysteme mit fsck: Ein umfassender Leitfaden
Fehlerbehebung
Gigacube Admin: Zugang zu den erweiterten Einstellungen Ihres Routers
Fehlerbehebung
Linux Mint Themes: Personalisieren Sie Ihren Desktop
Open Source
TCPdump-Beispiele: Paketakquise und Netzwerkdiagnose
Fehlerbehebung
Mounten von ISO-Images unter Linux: Eine Schritt-für-Schritt-Anleitung
Anleitungen