pelicin › web › HTML

HTML Tags: Media

The essential things on this page are:

  • <img>, <audio>, <video> to embed multimedia files
  • <iframe> to embed HTML pages

These are the HTML tags related to embedding media (picture, video, sound, etc).

TagTypeDescription
Media
<img>InlineEmbeds image
<audio>InlineEmbeds audio
<video>InlineEmbeds video
<picture>InlineDefines different alternative versions of an image
<source>OtherSpecifies a media source
Maps
<map>OtherDefines an image map
<area>OtherDefines an area inside an image map
Tracks (subtitles)
<track>OtherSpecifies subtitle for <audio> or <video>
Embedding
<embed>BlockEmbeds external content
<iframe>InlineEmbeds another HTML page
<object>InlineRepresents any external resource
<param>OtherDefines a parameter for <object>

<img>

Embeds image.

Common attributes
  • alt=[...] — alternative text describing the image (for screen readers).
  • src=[...] — image URL source
  • width=[...] — width of image in pixels
  • height=[...] — height of image in pixels
Attributes related to loading
  • decoding=[...] — hints when/how to decode the image (i.e., when/how the browser should translate the image data to something it can show on screen). Can be:
    • sync (decode the image synchronously with page render)
    • async (decode the image asynchronously with page render)
    • auto (let the browser decide)
  • loading=[...] — Indicates when to load the image
    • eager (loads the image immediately)
    • lazy (loads the image when it's close to being visible on screen)
  • srcset=[...] — read here
  • sizes=[...] — read here
Attributes related to map
  • ismap — indicates that the image is part of server-side image map (only makes sense if the image is a children of <a href="...">). When the image is clicked, the browser will send the coordinates where the image was clicked.
  • usemap=[...] — points to the name of a client-side image map ( <map name="...">) associated with the image.
Attributes related to security
| LIVE PREVIEW

<audio>

Embeds audio.

Instead of providing src directly, you can also provide multiple sources with children <source src="..." type="..."> tags. The browser will use the first one it understands.

Common attributes
  • src=[...] — audio URL source
  • controls — display audio controls (play/pause button, volume, etc.)
Attributes related to playback
  • autoplay — begin playing audio ASAP, without waiting for the entire audio file to finish downloading
  • muted — set the default audio volume to mute
  • loop — replay audio when it reaches the end
  • currentTime — for JavaScript: get/set current playback position
  • duration — for JavaScript: get audio length
Attributes related to loading
  • preload=[...] — hints the browser what should be preloaded. Can be:
    • auto (preload everything)
    • metadata (preload only audio metadata, e.g. length)
    • metadata (don't preload anything)
Attributes related to security
| LIVE PREVIEW

<video>

Embeds video.

Instead of providing src directly, you can also provide multiple sources with children <source src="..." type="..."> tags. The browser will use the first one it understands.

Common attributes
  • src=[...] — video URL source
  • controls — display video controls (play/pause button, volume, etc.)
  • width=[...] — width of video display area in pixels
  • height=[...] — height of video display area in pixels
Attributes related to playback
  • autoplay — begin playing video ASAP, without waiting for the entire video file to finish downloading
  • muted — set the default video volume to mute
  • loop — replay video when it reaches the end
  • playsinline — play the video "inline" within the video display area (don't play it fullscreen like mobile browsers normally do)
  • currentTime — for JavaScript: get/set current playback position
  • buffered — for JavaScript: get time ranges of the buffered area
  • duration — for JavaScript: get audio length
Attributes related to loading
  • poster=[...] — URL of an image to be shown while the video is downloading. (By default, browsers use the first video frame.)
  • preload=[...] — hints the browser what should be preloaded. Can be:
    • auto (preload everything)
    • metadata (preload only video metadata, e.g. length)
    • metadata (don't preload anything)
Attributes related to security
| LIVE PREVIEW

<picture>

Works like <img srcset="..." sizes="...">, but semantically, instead of giving sources of an image in different resolutions, you give sources of an image in different versions.

(E.g., instead of just resizing the image for smaller screens, you crop out the less relevant part for display on smaller screens.)

| LIVE PREVIEW
Chris standing up holding his daughter Elva

<source>

Specifies a media source inside <picture>, <audio>, or <video>.

Attributes when it's child of <picture>
  • media=[...] — media query, e.g. (max-width: 799px)
  • srcset=[...] — read here
  • sizes=[...] — read here
Attributes when it's child of <audio> or <video>
  • src=[...] — URL of the media
  • type=[...] — MIME type of the media (e.g. video/mp4), optionally with a codecs parameter (e.g. audio/ogg; codecs=vorbis).

<map>

Defines an image map (clickable link areas in image).

It will contain some <area> tags.

Possible attributes
  • name=[...] — name of map

<area>

Defines an area inside an image map.

When given href attribute, the area represents a hyperlink.

Common attributes
  • alt=[...] — alternative text describing the area
  • href=[...] — target URL when the area is clicked
  • target=[...] — where to open the target URL (read here)
  • shape=[...] — defines the shape of the area. Can be:
    • rect (indicates the area is a rectangle)
    • cicle (indicates the area is a circle)
    • poly (indicates the area is a polygon)
    • default (indicates the area is the rest of the undefined regions)
  • coords=[...] — defines the coordinates of shape:
    • if shape="rect", the value is x1,y1,x2,y2, which defines the top-left and bottom-right corner of the rectangle
    • if shape="cicle", the value is x,y,radius, which defines the circle center and the radius
    • if shape="poly", the value is x1,y1,x2,y2,...,xn,yn which defines the coordinates of the polygon
Less common attributes
  • download=[...] — instead of opening the link, prompt the user to download it. If value is not empty, it will be the name of the downloaded file. (Only works for same-origin URLs, or blob: and data: schemes)
  • ping=[...] — list of space-separated URLs to which the browser will send PING POST requests when the hyperlink is followed (usable for tracking).
  • hreflang=[...] — indicates the language of the linked resource (e.g. en-US)
  • rel=[...] — relation of the linked resource (read here)
  • referrerpolicy=[...] — read here
| LIVE PREVIEW
HTML CSS JavaScript MDN infographic

<track>

Specifies timed text tracks ("subtitles") for <audio> or <video>. The format is WebVTT (.vtt files).

Possible attributes
  • src=[...] — URL to the VTT file. Must be on the same origin as the document, unless crossorigin attribute is set on the parent <audio> or <video>
  • srclang=[...] — language of the text track (e.g. en)
  • label=[...] — title of the text track (shown when listing available text tracks)
  • default — indicates that this is the default text track
  • kind=[...] — signifies what kind of text track this is. Can be:
    • subtitles
    • captions
    • descriptions
    • chapters
    • metadata
| LIVE PREVIEW

<embed>

Embeds external content. This content is provided by an external application (e.g. browser plugin). If possible, use <img>, <audio>, or <video> instead.

"Most modern browsers have deprecated and removed support for browser plugins, so relying upon <embed> is generally not wise if you want your site to be operable on the average user's browser" (MDN).

Possible attributes
  • src=[...] — URL to the content
  • type=[...] — MIME type of the content
  • height=[...] — displayed height of the content (in pixels)
  • width=[...] — displayed with of the content (in pixels)
| LIVE PREVIEW

<iframe>

Embeds another HTML page into current page (as inline frame).

Represents nested browsing context. (Browsing context is the environment where a browser displays a Document. It's normally a tab, a window, or an iframe.)

Common attributes
  • src=[...] — URL of page to embed
  • srcdoc=[...] — overrides src
  • height=[...] — height of the frame
  • width=[...] — width of the frame
  • name=[...] — name of the frame (can be referenced by the target or formtarget attribute of <a>, <form>, etc.)
  • loading=[...] — Indicates when to load the iframe
    • eager (loads the iframe immediately)
    • lazy (loads the iframe when it's close to being visible on screen)
Attributes related to security
  • allow=[...] — feature policy for the iframe (specifies what features is available to the iframe), e.g. allow="camera 'none'; microphone 'none'"
  • csp=[...] — CSP enforced for the iframe (read here), e.g. csp="default-src 'self'"
  • sandbox=[...] — applies extra restriction to the iframe. Empty value means restrict everything. Otherwise, the value is space-separated list of something like: allow-downloads, allow-forms, allow-popups, etc. (read here for the complete list)
  • referrerpolicy=[...] — read here
| LIVE PREVIEW

<object>

Represents an external resource (which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin).

Possible attributes
  • data=[...] — URL to the resource
  • type=[...] — MIME type of the object (must be specified)
  • height=[...] — displayed height of the object
  • width=[...] — displayed width of the object
  • usemap=[...] — points to the name of a client-side image map ( <map name="...">) associated with the object.
Questionable attributes
  • name=[...] — name of the a valid browsing context (for what?)
  • form=[...] — id of a <form id="..."> this object is associated with (for what?)
| LIVE PREVIEW

<param>

Defines a parameter for <object>.

Possible attributes
  • name=[...] — name of the parameter
  • value=[...] — value of the parameter
<!-- Embed a flash movie with parameters -->
<object data="movie.swf" type="application/x-shockwave-flash">
  <param name="foo" value="bar">
</object>

References