Learn 36 Media concepts for Frontend development, with definitions, aliases, and ready-to-use AI prompts.
An informative image that contributes meaning to the surrounding content.
Add a responsive content image using semantic img markup, meaningful concise alternative text that communicates its purpose, explicit width and height to prevent layout shift, and dimensions appropriate for the rendered slot.A visual flourish that adds atmosphere without conveying essential information.
Implement a purely decorative image so assistive technology ignores it, using an empty alt attribute for img or CSS background imagery when appropriate. Ensure no required meaning, label or action depends on the decoration.An image that lets the browser choose an efficient source for the display size and density.
Create a responsive image using srcset and sizes with correctly sized source candidates, a dependable src fallback, meaningful alt text, explicit dimensions and max-width behavior that prevents overflow and unnecessary mobile downloads.A picture whose crop or composition changes to preserve the subject across layouts.
Use the picture element for art direction, supplying a close portrait crop on narrow screens and a wider composition on desktop. Keep the same subject and meaning, include an img fallback with accurate alt text, and avoid media-query duplication in sizes.A reserved width-to-height proportion that keeps media stable while it loads.
Create a reusable media frame with CSS aspect-ratio, responsive width and overflow handling. Preserve the intended composition, reserve space before the asset loads, and provide sensible behavior when the source has a different intrinsic ratio.An image fitted inside a fixed frame using cover, contain or another sizing mode.
Place an image in a fixed-ratio card using object-fit and object-position. Let users compare cover and contain, preserve the focal point, avoid distorting the source and keep important content from being cropped unexpectedly.A lightweight blurred preview shown while the full-quality image loads.
Create a blur-up image placeholder using a tiny lightweight preview that occupies the final dimensions, transitions to the decoded full image without layout shift, respects reduced motion and never replaces useful loading or error feedback.An off-screen image deferred until it approaches the viewport to reduce initial work.
Lazy-load below-the-fold images with the native loading attribute, explicit dimensions and useful alt text. Keep above-the-fold hero media eager, avoid hiding content from search or assistive technology, and handle loading failure visibly.A resolution-independent graphic suited to icons, diagrams, logos and simple artwork.
Add a scalable SVG illustration with a viewBox, responsive dimensions and an accessible name only when it conveys meaning. Keep decorative paths hidden from assistive technology, use currentColor where appropriate and avoid embedded unsafe scripts.A self-contained media item paired with explanatory or attribution text.
Create a semantic figure containing an informative image and a concise figcaption with context, date or credit. Keep alternative text focused on the visual meaning and avoid repeating the same wording in both alt text and caption.A coordinated collection of images presented as a scannable grid.
Create a responsive image gallery with semantic list structure, consistent thumbnails, useful alternative text, lazy loading below the fold and keyboard-accessible links to larger versions. Preserve source aspect ratios without causing layout shift.An image collection arranged in staggered columns with varied item heights.
Create a responsive masonry-style image gallery that preserves a logical DOM and keyboard reading order, avoids large visual jumps while images load, adapts column count at breakpoints and falls back cleanly when masonry layout is unsupported.A sequence of media slides navigated within a fixed viewing area.
Create an accessible manual image carousel with previous and next buttons, current-position status, labelled slide region, keyboard operation and swipe support. Do not auto-advance by default; if motion is added, provide pause and respect reduced motion.A compact row of previews used to choose the main media item.
Create a thumbnail strip controlling a larger image, with labelled buttons, a clearly indicated current thumbnail, arrow-key-friendly navigation, responsive horizontal scrolling and selected state announced without moving focus unexpectedly.Two aligned images compared through a draggable or keyboard-adjustable reveal.
Create an accessible before-and-after image comparison with aligned sources, visible labels, a native range input, keyboard controls and a textual alternative describing the difference. Do not make dragging the only way to understand the result.A detailed image that users can enlarge and inspect without losing orientation.
Create a zoomable diagram with visible zoom-in, zoom-out and reset controls, keyboard and touch support, announced zoom level and panning constrained to the media frame. Keep a text alternative available for essential information.An enlarged image viewer displayed above the current page context.
Create an accessible media lightbox opened from gallery thumbnails, with a labelled dialog, focus containment, Escape close, previous and next controls, image position, caption, background scroll lock and focus restoration to the invoking thumbnail.An anchored marker that reveals information about a specific region of an image.
Add accessible hotspots to a product image using real buttons with clear names, keyboard focus and collision-aware popovers. Keep marker positions stable as the image scales and provide an equivalent text list for spatial annotations.A player for synchronized visual and audio media with playback controls.
Create an accessible HTML video player with multiple source formats, a poster, native or fully keyboard-operable controls, captions, transcript access, volume independent of system audio and no autoplay with sound.A compact player for spoken audio, music or sound recordings.
Create an accessible audio player with clear play, pause, seek, duration, volume and playback-rate controls, a downloadable fallback where appropriate, a nearby transcript and status updates that do not interrupt screen-reader users.A representative still displayed before video playback begins.
Create a video poster image that accurately represents the content, fits the player ratio and keeps an obvious labelled play button visible at strong contrast. Avoid misleading frames, embedded essential text and autoplay when the poster is clicked unintentionally.A branded control set for playback, seeking, volume, captions and display modes.
Build custom media controls only when native controls are insufficient. Use labelled buttons and native range inputs, expose play and muted states, preserve full keyboard operation, show focus clearly and keep controls available at every responsive size.Synchronized text for speech and meaningful non-speech audio that users can toggle.
Add accurate closed captions to prerecorded video using a WebVTT captions track, including speaker identification and meaningful sounds as well as dialogue. Provide a visible toggle, readable styling and synchronized timing without covering important visuals.A translated or transcribed dialogue track for viewers who do not understand the spoken language.
Add selectable WebVTT subtitle tracks for English, Malay and Simplified Chinese, with correct language codes, human-reviewed translation, a visible language menu and enough space for longer localized lines without obscuring key content.A readable text version of spoken, non-speech and important visual information.
Provide an easy-to-find transcript directly below the media, including speakers, speech, meaningful sounds and important visual information. Use semantic headings and timestamps, allow text search and let interactive transcript segments seek the player accessibly.Narration of important visual information for people who cannot see the video adequately.
Offer audio description for important visual content that is not conveyed in the main soundtrack, preferably planned into the script or available as a clearly labelled described version. Preserve playback position when switching versions.Audio or video delivered in real time with current status and audience controls.
Create an accessible live-stream player with a clear Live status, pause or jump-to-live behavior, keyboard controls, live captions, a text alternative when required, resilient reconnect states and no unexpected autoplay with sound.A video hosted by another service and displayed inside the current page.
Embed a third-party video responsively with a descriptive iframe title, constrained permissions, lazy loading below the fold and a privacy-enhanced or consent-aware mode. Ensure captions and transcript access remain available outside the embed.An external document or application isolated within an inline frame.
Create a responsive iframe embed with a descriptive title, sandbox and allow attributes limited to required capabilities, a stable aspect ratio, loading state and fallback link. Avoid trapping keyboard focus or resizing unexpectedly.An interactive geographic view paired with an accessible location alternative.
Embed an interactive map with a descriptive title, keyboard-accessible controls, restrained initial zoom and consent-aware loading. Provide the full address, directions link and key location information outside the map for non-visual users.A third-party post presented with attribution, media and engagement context.
Create a consent-aware social media embed that shows a lightweight local preview first, clearly identifies the source, loads third-party scripts only on request, preserves a direct link and provides equivalent text for unavailable or deleted posts.An interactive viewport for rotating, zooming and inspecting a three-dimensional object.
Create a progressively enhanced 3D product viewer with labelled rotate, zoom and reset controls, keyboard and touch support, a static poster fallback, reduced-motion behavior and a text description of the object and its important details.A script-drawn bitmap surface used for visualizations, editing or real-time graphics.
Create an interactive canvas visualization with resolution-aware rendering, responsive dimensions and equivalent semantic HTML data or controls. Do not place essential content only on canvas, and support keyboard input plus high-contrast display modes.A scalable vector graphic whose regions can respond to focus, pointer or data changes.
Create an interactive inline SVG diagram with a viewBox, scalable layout, labelled focusable controls for interactive regions and semantic HTML alternatives for the data. Use CSS-driven states and ensure focus order follows the visual story.A visual representation of audio amplitude often paired with seeking and editing.
Create an audio waveform that visualizes playback without becoming the only seek control. Pair it with a labelled native range input, elapsed and total time, keyboard seeking, strong played-state contrast and a transcript for spoken content.An ordered collection of audio or video items connected to one player.
Create an accessible media playlist with semantic list markup, clear current-item state, duration and completion metadata, keyboard-selectable rows, optional next-item autoplay that users control and preserved playback state when switching tracks.