HTML Media (Audio/Video)

Responsive Image with picture

Serving the right image at the right size saves bandwidth on phones and avoids blurry assets on retina displays. The `<picture>` element plus `srcset` lets the browser pick the best source for the device. This snippet covers density-based srcset for retina, width-based srcset with sizes for fluid layouts, and art direction with multiple `<source>` entries for different aspect ratios.

HTML Data Attributes, Highlight, and Media Elements

Three HTML features people forget about: `data-*` attributes for stashing state and config on elements (queryable from CSS and JS), the semantic-highlight elements (`<mark>`, `<dfn>`, `<kbd>`, `<samp>`, `<var>`) that newcomers reach for `<span>` instead, and the HTML5 media elements (`<video>`, `<audio>`, `<source>`, `<track>`) with their key attributes. Treat this as a reference; you do not need to memorize it.

HTML Media and Interactive Elements Quiz

Six drills on HTML5 media: responsive video embeds, the progress element, canvas drawing, custom audio controls, the picture element for art direction, and image maps.