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)
हमारा मिशन है –
"विद्यार्थियों को शिक्षित करना और उन्हें प्रतिस्पर्धी परीक्षाओं की तैयारी में उनकी पूर्ण क्षमता के साथ उत्कृष्टता प्राप्त करने में सहायता करना। साथ ही उनमें अच्छे संस्कारों का संचार करना और उनके व्यक्तित्व का विकास करना।"
OnlineCBT
