HTML elements
Show images, sound and video, with their captions, or make parts of an image clickable.
One clickable shape on an image map, with its own link and alt text. It always sits inside a map.
<img src="shapes.svg" alt="A blue square and a grey circle" width="240" height="120" usemap="#d-areas">
<map name="d-areas">
<area shape="rect" coords="20,20,100,100" href="#" alt="The square">
<area shape="circle" coords="170,60,40" href="#" alt="The circle">
</map>LUZ adds no style: the browser look is kept.
Plays sound with the browser's own controls. Offer one source per file format, and put a link to the file inside for browsers that cannot play it.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>Styled by elements/media.css, with no class. LUZ makes the controls full width. The .luz-player component builds its own.
Shows an image. Always write alt: say what the image shows, or leave it empty when it is only decoration.
<img src="shapes.svg" alt="A blue square and a grey circle" width="240" height="120">Styled by elements/media.css, with no class. LUZ keeps it inside its box and keeps the aspect ratio.
Turns parts of an image into links, with one area per clickable shape. Connect it to the img with usemap.
<img src="shapes.svg" alt="A blue square and a grey circle" width="240" height="120" usemap="#d-map">
<map name="d-map">
<area shape="rect" coords="20,20,100,100" href="#" alt="The square">
<area shape="circle" coords="170,60,40" href="#" alt="The circle">
</map>LUZ adds no style: the browser look is kept.
A text file timed to an audio or video, such as captions, subtitles or chapter titles. It goes inside the audio or video element.
<video controls preload="metadata" width="320" aria-label="A sun rises behind an arched window on a whitewashed wall. No sound.">
<source src="video.mp4" type="video/mp4">
<track kind="captions" srclang="en" label="English" src="captions.vtt" default>
</video>Styled through the player component, from components/player.css: its captions button, its track menu and the captions over its video. A video without the player keeps the browser captions.
Plays video with the browser's own controls. Always give a text alternative, and captions when there is speech or other sound.
<video controls preload="metadata" width="320" aria-label="A sun rises behind an arched window on a whitewashed wall. No sound.">
<source src="video.mp4" type="video/mp4">
</video>Styled by elements/media.css, with no class. LUZ keeps it inside its box. The .luz-player component builds its own controls.