Figure, Blockquote & Semantic Text in HTML
From the HTML cheat sheet · Text & Content Elements · verified Jul 2026
Figure, Blockquote & Semantic Text
Semantic wrappers for images, quotes, and meaningful inline text
html
<!-- Figure with caption -->
<figure>
<img src="chart.png" alt="Sales chart">
<figcaption>Q4 2024 sales performance</figcaption>
</figure>
<!-- Blockquote -->
<blockquote cite="https://example.com">
<p>The only way to do great work is to love what you do.</p>
<cite>Steve Jobs</cite>
</blockquote>💡 <figure> is not just for images — use it for code blocks, videos, diagrams, anything with a caption
⚡ <time datetime="..."> gives machines a parseable date — great for SEO and accessibility
📌 <dl> description lists are perfect for glossaries, FAQs, and key-value pairs
🟢 <mark> highlights text, <kbd> shows keyboard keys, <code> shows inline code — all semantic
figureblockquotesemantictext