Verwendung von <figure> und <figcaption>

7.1 Element <figure>

Die Verwendung der Tags <figure> und <figcaption> in HTML bietet eine semantische Möglichkeit, Bilder und andere Multimedia-Elemente mit Bildunterschriften hinzuzufügen. Diese Tags tragen dazu bei, die Struktur des Inhalts zu verbessern, ihn sowohl für Benutzer als auch für Suchmaschinen zugänglicher und verständlicher zu machen. Schauen wir uns diese Elemente genauer an.

Das Element <figure> wird verwendet, um eigenständige Inhalte zu kennzeichnen, die den Rest des Dokuments veranschaulichen oder erklären. Es kann ein Bild, ein Diagramm, ein Video, ein Audio, eine Tabelle oder sogar einen Codeblock enthalten. Normalerweise wird das <figure>-Element zusammen mit dem <figcaption>-Element verwendet, das eine Beschriftung für den Inhalt von <figure> hinzufügt.

Syntax

    
      <figure>
        <!-- Hier kann jedes Multimedia-Element stehen, z.B. ein Bild -->
      </figure>
    
  

Anwendungsbeispiele:

Beispiel 1: Bild mit Beschriftung

    
      <figure>
        <img src="example.jpg" alt="Beispielbild">
        <figcaption>Bildunterschrift, die den Inhalt erklärt</figcaption>
      </figure>
    
  

Beispiel 2: Tabelle mit Beschriftung

    
      <figure>
        <table>
          <tr>
            <th>Überschrift 1</th>
            <th>Überschrift 2</th>
          </tr>
          <tr>
            <td>Daten 1</td>
            <td>Daten 2</td>
          </tr>
        </table>
        <figcaption>Beschriftung zur Tabelle</figcaption>
      </figure>
    
  

7.2 Element <figcaption>

Das Element <figcaption> wird verwendet, um eine Bildunterschrift für den Inhalt des <figure>-Elements hinzuzufügen. Es kann entweder vor oder nach dem Inhalt von <figure> platziert werden, je nach Vorlieben des Entwicklers oder Anforderungen des Designs.

Syntax

    
      <figure>
        <!-- Inhalt des figure-Elements -->
        <figcaption>Bildunterschrift zum Inhalt</figcaption>
      </figure>
    
  

Anwendungsbeispiele:

Beispiel 1: Beschriftung nach dem Bild

    
      <figure>
        <img src="landscape.jpg" alt="Landschaft">
        <figcaption>Schöne Landschaft mit Bergen und See</figcaption>
      </figure>
    
  

Beispiel 2: Beschriftung vor dem Bild

    
      <figure>
        <figcaption>Schöne Landschaft mit Bergen und See</figcaption>
        <img src="landscape.jpg" alt="Landschaft">
      </figure>
    
  

7.3 Barrierefreiheit und SEO

Die Verwendung der Elemente <figure> und <figcaption> verbessert die Barrierefreiheit und SEO deiner Website. Screenreader, die von Menschen mit Behinderungen verwendet werden, verstehen dank des semantischen Tags <figcaption> den Kontext des Bildes besser. Suchmaschinen berücksichtigen auch die Struktur des HTML-Dokuments, was die Indexierung und Bewertung der Seite verbessert.

Anwendungsbeispiele in verschiedenen Kontexten:

Beispiel 1: Einbetten eines Diagramms

    
      <figure>
        <img src="chart.png" alt="Diagramm, das das Umsatzwachstum zeigt">
        <figcaption>Diagramm, das das Umsatzwachstum im letzten Quartal zeigt</figcaption>
      </figure>
    
  

Beispiel 2: Videoinhalt mit Beschriftung

    
      <figure>
        <video controls>
          <source src="example.mp4" type="video/mp4">
          Dein Browser unterstützt kein Video.
        </video>
        <figcaption>Beispielvideo, das die Funktionsweise des Produkts zeigt</figcaption>
      </figure>
    
  

Beispiel 3: Code mit Erklärung

    
      <figure>
        <pre>
          <code>
            function helloWorld() {
              console.log('Hello, world!');
            }
          </code>
        </pre>
        <figcaption>Beispiel einer JavaScript-Funktion, die "Hello, world!" in die Konsole ausgibt</figcaption>
      </figure>
    
  

7.4 Stil und Gestaltung mit CSS

Das Styling der Elemente <figure> und <figcaption> mit CSS ermöglicht es, ein attraktives visuelles Erscheinungsbild zu schaffen und die Wahrnehmung des Inhalts zu verbessern.

Beispiel mit angewandten Stilen:

    
      figure {
        border: 1px solid #ccc;
        padding: 10px;
        margin: 20px;
        text-align: center;
      }

      figcaption {
        font-style: italic;
        color: #555;
        margin-top: 10px;
      }
    
  

    
      <figure>
        <img data-max-width="800" data-id="ef101655-fef4-40b9-8b6c-f0c02494a747" src="https://cdn.javarush.com/images/article/ef101655-fef4-40b9-8b6c-f0c02494a747/800.jpeg" alt="nature">
        <figcaption>Schöner Anblick auf die Natur</figcaption>
      </figure>
    
  

    
      <figure>
        <img src="nature.jpg" alt="Natur">
        <figcaption>Schöner Anblick auf die Natur</figcaption>
      </figure>
    
  

Die Verwendung der Elemente <figure> und <figcaption> bietet eine semantische und strukturierte Möglichkeit, Multimedia-Inhalte mit Bildunterschriften auf Webseiten hinzuzufügen. Diese Elemente verbessern nicht nur die Barrierefreiheit und SEO, sondern machen den Inhalt auch für die Benutzer verständlicher und strukturierter.