Schneller Tipp: Der richtige Weg, Figure & Figcaption Elements zu verwenden

Die Elemente figure und figcaption sind semantisch gepaarte HTML5 -Tags, die häufig zusammen verwendet werden, um die Inhaltsstruktur und -zugängigkeit zu verbessern. Dieser Leitfaden bietet Best Practices für ihre korrekte Implementierung.

Das figure -Element verkapslich in sich geschlossenem Inhalt wie Illustrationen, Code-Snippets oder Diagramme. Die Platzierung im Dokument verändert die Gesamtbedeutung nicht. Entscheidend ist, dass nicht jedes Bild ein figure Element erfordert; Nur diejenigen, die unabhängige Informationseinheiten sind.

Mehrere Bilder in einer Abbildung:

Mehrere verwandte Bilder können sich innerhalb eines einzelnen figure Elements befinden:

<figure>
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847332126.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847481580.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847567268.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
</figure>

jenseits der Bilder:

Das figure Element ist nicht auf Bilder beschränkt. Es ist geeignet für:

• Codeblöcke
• Videos
• Audioclips
• Werbung

Beispiel mit einem Codeblock:

<figure>
  <code>
    p {
      color: #333;
      font-family: Helvetica, sans-serif;
      font-size: 1rem;
    }
  </code>
</figure>

verschachtelte Abbildungen:

Nesting figure Elemente ist akzeptabel, wenn sie logisch angemessen sind. Die Verwendung von Aria -Attributen kann die Semantik weiter verbessern:

<figure role="group">
  <figcaption>Dog breeds</figcaption>
  <figure>
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847332126.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
    <figcaption>Adorable Maltese Terrier</figcaption>
  </figure>
  <figure>
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847481580.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
    <figcaption>Cute black labrador</figcaption>
  </figure>
</figure>

Effektive FigCaption -Verwendung:

Das figcaption Element liefert eine Bildunterschrift oder Legende für die figure. Obwohl es nicht immer erforderlich ist, wenn es verwendet wird, sollte es idealerweise entweder vor oder nach dem Inhalt innerhalb des figure:

platziert werden

<figure>
  <figcaption>Three different breeds of dog.</figcaption>
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847332126.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847481580.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847567268.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
</figure>

oder:

<figure>
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847332126.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847481580.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847567268.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <figcaption>Three different breeds of dog.</figcaption>
</figure>

Rich Figcaptions:

für detailliertere Bildunterschriften finden Sie Überschriften und Absätze:

<figure>
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018848099968.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <figcaption>
    <h2 id="Puppy-School">Puppy School</h2>
    <p>Championship Class of 2016</p>
  </figcaption>
</figure>

häufig gestellte Fragen (FAQs):

Der vorgesehene FAQS -Abschnitt bleibt weitgehend unverändert, da er gemeinsame Fragen zu figure und figcaption verwendet. Die Informationen sind bereits präzise und gut strukturiert.

Das obige ist der detaillierte Inhalt vonSchneller Tipp: Der richtige Weg, Figure & Figcaption Elements zu verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!