Add semantic captions to images, charts, and code snippets using <figure> and <figcaption>.
Level: Beginner to Advanced
Duration: ~60 Mins Deep-Dive
1. Semantic Media Grouping: &
Before HTML5, web developers used generic
and elements to style image captions. HTML5 introduced the semantic and elements to bind illustrations, diagrams, code snippets, or charts with their descriptive caption.
2. Basic Syntax
Figure 1.1: Score distribution across 200,000 participating candidates.
3. Usage with Code Snippets
is not limited to images; it can encapsulate any self-contained reference content such as programmatic algorithms:
Algorithm 3: Method for computing candidate percentile rank.
4. Accessibility Advantage
Screen readers recognize as the authoritative label for the figure content, enabling non-sighted users to quickly grasp the significance of visual charts without ambiguity.
📝 Live Lesson Practice
HTML/CSSJavaScriptPythonC++CPHP
⌨️ Practice Inputs (लाइव इनपुट भरें)
(खाली होने पर RED, भरने पर GREEN underline)
Our mission is "To educate students and help them excel in competitive exam preparation to the best of their potential. To impart good values in students and develop their overall exam readiness."
OnlineCBT
