So verwenden Sie die HTML -Figuren- und Figcaption -Tags

Verwenden Sie Figure- und Figcaption -Tags, um Medieninhalte korrekt mit der Titelsemantik zu assoziieren und Barrierefreiheit, SEO und Struktur zu verbessern. 1. Die Abbildung wird verwendet, um unabhängige Inhalte wie Bilder, Diagramme oder Code -Snippets zu enthalten. 2. Figcaption liefert einen Titel dafür, der an der ersten oder letzten Position darin platziert werden kann. 3.. Es ist für Medien mit Titeln, im Text zitierten Diagramme oder Inhalt geeignet, die entfernt werden können, ohne die Bedeutung des Textes zu beeinflussen. 4. Bei der Verwendung muss das Bild -Alt -Attribut beibehalten werden, um nicht für das Stillayout verwendet zu werden, sodass Multimedia -Kombinationen jedoch nur eine Figur pro Figur; 5. Es gibt standardmäßig keinen visuellen Stil, und CSS muss das Erscheinungsbild steuern, aber die HTML -Semantik verbessern.

Die figure und die figcaption -HTML -Tags sind nützlich, um Bilder, Diagramme, Codeausschnitte oder andere Medien mit ihren zugehörigen Bildunterschriften semantisch zu gruppieren. Die korrekte Verwendung von ihnen verbessert die Zugänglichkeit, SEO und die Gesamtstruktur Ihres Inhalts.

Was die Figur und die Figcaption -Tags tun

Das <figure></figure> -Element repräsentiert in sich geschlossenen Inhalten, die vom Hauptinhalt wie Abbildungen, Fotos, Diagramme oder Code-Beispiele weggezogen werden können, ohne den Fluss des Dokuments. Es wird in der Regel inline verwiesen, kann aber allein stehen.

Das <figcaption></figcaption> -Element liefert eine Bildunterschrift oder Legende für den Inhalt in <figure></figure> . Es ist optional, aber wenn es verwendet wird, sollte es das erste oder letzte Kind von <figure></figure> sein.

Gemeinsam helfen sie, Leser und Suchmaschinen zu überprüfen, die die Beziehung zwischen den Medien und ihren Beschreibungen zu verstehen.

Wann ist Figur und Figur zu verwenden

Verwenden Sie diese Tags, wenn:

• Ein Bild, ein Diagramm oder ein Codeblock haben eine Bildunterschrift.
• Der Inhalt wird aus dem Haupttext (z. B. „siehe Abbildung 1“) verwiesen.
• Die Medien sind in sich geschlossen und können entfernt werden, ohne die Bedeutung des umgebenden Textes zu brechen.

Häufige Anwendungsfälle:

• Fotos mit beschreibenden Bildunterschriften
• Diagramme oder Grafiken mit Titeln
• Code -Ausschnitte mit Erklärungen
• Illustrationen in Artikeln

Wie man sie verwendet: Basic Syntax

Hier ist ein einfaches Beispiel mit einem Bild:

 <Abus>
  <img  src = "chart.png" Alt = "Umsatzwachstum von 2020 bis 2023" alt="So verwenden Sie die HTML -Figuren- und Figcaption -Tags" >
  <FigCaption> Umsatzwachstum in den letzten drei Jahren. </Figcaption>
</figur>

Und mit einem Code -Snippet:

 <Abus>
  <pre class="brush:php;toolbar:false"> <code> Funktion hello () {
  console.log ("Hallo, Welt!");
} </code> 

Sie können auch <figcaption> vor dem Inhalt platzieren, wenn Sie die obige Beschriftung möchten:

 <Abus>
  <FigCaption> Verzeichnisstruktur eines grundlegenden Webprojekts. </Figcaption>
  <pre class="brush:php;toolbar:false">
Projekt/
├── Index.html
├── CSS/
│ └── style.css
└── js/
    └── main.js
  

Wichtige Punkte, die sich erinnern sollten

• Verwenden Sie immer alt -Text auf Bildern auch in <figure></figure> . Das alt -Attribut beschreibt das Bild für die Zugänglichkeit, während <figcaption></figcaption> Kontext hinzufügt.
• Verwenden Sie nicht <figure></figure> nur zum Styling . Es ist ein semantisches Element, kein Wrapper für schwimmende Bilder.
• Mehrere Elemente können in einer <figure></figure> wie ein Bild und ein Diagramm zusammen mit einer einzigen Bildunterschrift verfolgen .
• Nur eine <figcaption></figcaption> pro <figure></figure> , kann jedoch bei Bedarf mehrere Sätze oder sogar Absätze enthalten.

Diese Tags ändern das visuelle Erscheinungsbild standardmäßig nicht - die Styling ist bis zu CSS -, aber sie machen Ihre HTML sinnvoller.

Wenn es wie eine Figur in einem Lehrbuch mit einer Untertitel darunter (oder darüber) aussieht, sind <figure></figure> und <figcaption></figcaption> wahrscheinlich die richtige Wahl.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die HTML -Figuren- und Figcaption -Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!