E04: Images & Figure – Semantic HTML | Universal by Design

In modern web design, a picture is more than just a visual; it is a critical component of accessibility and performance. This lesson breaks down the four essential HTML elements used to handle imagery: img, figure, figcaption, and the picture element.

Using a "graduation picture" analogy, you will learn to visualise these components: the photograph itself (img), its frame (figure), and the descriptive label underneath (figcaption). The lesson also dives into the picture element, which allows for art direction and serving different images for various screen sizes.

Key topics include:
___
- Essential Attributes: Setting the src and defining width and height to prevent Cumulative Layout Shift (CLS).
- Accessibility: Using the W3C Alt Decision Tree to write meaningful alt text or designate decorative images.
- Performance: Implementing lazy loading for below-the-fold content and eager loading for hero sections.
- Responsive Images: Mastering srcset and sizes to help browsers select the optimal file for any device.

📖 Resources Mentioned:
- W3C Alt Decision Tree: https://www.w3.org/WAI/tutorials/images/decision-tree/
- MDN Img element: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img
-MDN Figure: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/figure
- MDN Picture: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture

Part of Universal by Design: a free course on web development fundamentals with accessibility from lesson one.

📚 Full course: https://builderius.io/universal-by-design-web-development-basics-with-builderius/
🎯 Follow along: https://demo.builderius.io

Timestamps:
00:00 Intro: Modern Web Design and Images
00:17 The Four Core Image Elements: img, figure, figcaption, and picture
00:32 A Visual Metaphor: The Graduation Picture Concept
00:56 Inserting an Image Element in Builderius
01:36 Essential Attributes: Source (src) and Image Selection
02:31 Mastering Alt Text: Accessibility and the W3C Decision Tree
03:53 Image Loading Methods: Lazy vs. Eager Loading
05:32 Performance Optimisation: Defining Width and Height to Reduce CLS
06:26 Advanced Responsiveness: Using srcset and sizes
12:27 The Figure Element: When to Use Semantic Wrappers
15:18 Adding context with figcaption
16:03 Art Direction with the Picture Element
19:36 Summary and Next Steps

#builderius #webdevelopment

Видео E04: Images & Figure – Semantic HTML | Universal by Design канала Builderius —Visual Development Environment for WP