Start learning HTML audio and video: the audio, video, source and track elements, built-in controls, captions and subtitles, accessible and responsive media, and the formats browsers can play, with a live format checker and a map of this section.
Learn the HTML audio element: adding sound with src, controls, loop, muted, preload and autoplay, choosing MP3, AAC, Ogg or WAV, fallback content, the autoplay rules, controlling playback with JavaScript, transcripts, and accessibility, with a live audio player you can try.
Learn how to add and manage images in HTML. Master the img element, src and alt, width and height, image formats, responsive images with srcset and the picture element, lazy loading, figure and figcaption, and accessible images with CodeHarborHub.
Learn HTML media controls: the built-in controls attribute, what browsers add, how to build your own accessible player with buttons and sliders using the media API (play, pause, currentTime, volume, playbackRate and events), keyboard support, and common mistakes, with a live custom player.
Learn the HTML source element: offering several formats for audio and video with src and type, how the browser picks the first source it can play, codecs in the type attribute, the media attribute, fallback content, and common mistakes, with a live demo that shows the browser choosing.
Learn the HTML track element: adding captions, subtitles, descriptions, chapters and metadata to audio and video with kind, src, srclang, label and default, how WebVTT files work, the TextTrack JavaScript API and cuechange event, cross-origin rules, and common mistakes, with live demos.
Learn the HTML video element: embedding video with src, controls, width, height, poster, preload, muted, loop, playsinline and autoplay, choosing MP4 or WebM, avoiding layout shift, background videos done safely, compressing files, and accessibility, with a live video player you can try.
Learn how the HTML img element works. Understand how browsers load images, the core attributes, why images are inline, how to fix the small gap below an image, make images fit with CSS, handle broken images, and choose between img, picture, SVG, and CSS backgrounds on CodeHarborHub.