Embedded content

The following elements are used to embed media or other objects into the document.

img

The img element is the image element:

<img alt crossorigin height ismap sizes src srcset width />

Attributes

The attributes that are used in the img element are as follows:

• alt: This is the alternate text for the image. Use this to describe the image. This is used to enhance accessibility.
• crossorigin: This lets the browser know whether this image should be fetched with a CORS request. If the image will be modified in a canvas element and not from the same domain name, then a CORS request must be used.
• height: This is an attribute to set the height of the image.
• ismap: This lets the browser know whether the image is used in a server-side map.
• sizes: This is a list of media conditions that will map to a size. This is used to help the browser determine which image to use. By default, this will be 100 VW, which is 100% of the view width.
• src: This is the most important attribute, it is the image URL.
• srcset: This is a list of multiple images that can be used for display on our web page. This is used to target different screen sizes or pixel densities.
• width: This is an attribute to set the width of the image.

Description

The img element is used if you want an image in the document. This element has many attributes, but the src and alt attributes are the only required attributes. The alt attribute should be used to describe the image in almost 100% of the cases. The main exception is when the image is only used as a decorative image, for example, when an image is used instead of a horizontal rule. The width and height can be used if the image is of a different size than what is needed on the page; otherwise, it defaults to the size of the image.

The crossorigin element can be confusing. It is used to ensure that you have ownership of an image before you modify the image in a canvas element. The image needs to either be from the same fully qualified domain name or the server's response must let the browser know whether the current domain can use the image.

Finally, srcset is used to give the browser a list of images that it can use. This is done with a comma-separated list of URLs and a descriptor. A descriptor can either be a width descriptor, which would be a number followed by w, or a pixel descriptor, which is a number followed by x. The width descriptor tells the browser the width of the image. The pixel descriptor tells the browser the pixel density it should use for the image.

Note

The width descriptor can also be used by the browser when the pixel density changes. For example, if you have an image that is double the resolution and the pixel density doubles as well, the browser will choose the larger resolution.

The sizes element is used along with srcset to help the browser identify a break point. This is done using a media condition, for example, "(min-width: 1600px) 25vw, 100vw". This states that if the width of the page is at least 1600 pixels, the images will be 25% of the view width, otherwise the view width is 100%. This helps the browser know where you want a break point and how large you want the image to be.

Note

The best way to think about srcset is that you are letting the browser know about all the images that can be used in a specific img element. You include the information that the browser is most concerned about—width and pixel density—and let the browser choose.

Here are a few examples. The first example is a simple img tag and the next one uses crossorigin:

<img src="example.png" alt="This is an example image"/>
<img src="example.png" crossorigin="anonymous" alt="This is an example image"/>

Here is a srcset example that lets the browser choose the image based on pixel density:

<img src="normal.jpg" srcset="normal.jpg 1x, retina.jpg 2x" alt="Image of Person in article" />

The following is an example using srcset and widths:

<img src="regular.jpg" srcset="double_size.jpg 1000w, regular.jpg 500w" sizes="100vw" alt="A bird"/>

iframe

The iframe element is the inline frame element:

<iframe height name seamless src width></iframe>

Attributes

The attributes that are used in the iframe element are as follows:

• height: This is the attribute to set the height.
• name: This states a name that can be used in the target attribute.
• seamless: This makes iframe appear as part of the content of the document. This will apply the outer context CSS and enables us to open links in the outer context.
• src: This is the URL of the embedded document.
• width: This is the attribute to set the width.

Description

The iframe element is used to embed another full HTML document inside the current document.

Here is an example that loads the Google homepage and another that loads Packt Publishing's page:

<iframe src="http://www.google.com"></iframe>
<iframe height="100px" name="remote-document" seamless src="https://www.packtpub.com/" width="100px"></iframe>

embed

The syntax of the embed element is as follows:

<embed height src type width/>

Attributes

The attributes that are used in the embed element are as follows:

• height: This is the attribute to set the height
• src: This is the URL of the object to be embedded
• type: This is the MIME type of the object
• width: This is an attribute to set the width

Description

The embed element is used to embed other objects in the document. There are other elements for embedding objects as well, depending on their type. For example, you can embed a video using the video element, as follows:

<embed src="example.mp4" type="video/mp4"/>

See also

You can also refer to the audio, video, and object elements to learn more about the embed element.

object

The syntax of the object element is as follows:

<object data height type width></object>

Attributes

Here are the attributes that are used in the object element:

• data: This is the URL of the object to be embedded
• height: This is the attribute to set the height
• type: This is the MIME type of the object
• width: This is the attribute to set the width

Description

The object element can be used very much like the embed element. This has historically been used for the Flash objects.

Here is an example:

<object data="example.swf" type="application/x-shockwave-flash"></object>

See also

You can also refer to the audio, video, embed, and param attributes to find out more about the object element.

param

The param element is the parameter element:

<param name="movie" value="video.swf"/>

Attributes

The attributes that are used in the param element are as follows:

• name: This is the name of the parameter
• value: This is the value of the parameter

Description

The param element defines a parameter for the object element. The parent of this element should be an object element.

Here is an example. This example is useful when using objects on older browsers:

<object data="example.swf" type="application/x-shockwave-flash">
    <param name="movie" value="example.swf" />
</object>

video

The syntax of the video element is as follows:

<video autoplay buffered controls crossorigin height loop muted played poster src width></video>

Attributes

The attributes that are used in the video element are as follows:

• autoplay: This is a Boolean attribute that tells the browser to start playing the video as soon as it can play after the loading has stopped
• buffered: This is a read object that tells how much of the video has buffered
• controls: This is a Boolean attribute to decide whether to display the controls
• crossorigin: This attribute is used make a CORS request if you plan on modifying the video in a canvas and the video is not hosted at the same fully qualified domain name
• height: This is the attribute to set the height
• loop: This states whether or not to loop the video
• muted: This states whether or not to mute the audio
• played: This is a read object, which reads how much of the video has been played
• poster: This is a URL of an image that will be displayed until the video can played
• src: This is the URL of the video
• width: This is the attribute to set the width

Description

The video element is a new element introduced in HTML5. You can use this to play a video directly in the browser. This is very useful as the user does not need a plugin or special player to view the video. In addition to this, you can use the video element as a source for the canvas element.

You can also use the source element to include multiple sources in case the browser can only play a certain type of file. If the browser does not support the video element or the file type, you can put the fallback content into the element.

Here is an example using the video element and another that demonstrates possible values for all of the attributes:

<video src="example.mp4" autoplay poster="example-poster.png"></video>
<video autoplay buffered controls crossorigin="anonymous" height="100px" loop muted played poster="cover.jpg" src="video.ogg" width="100px"></video>

See also

You can also refer to the source and track attributes to find out more about the video element.

audio

The syntax of the audio element is as follows:

<audio autoplay buffered controls loop muted played src volume></audio>

Attributes

The attributes that are used in the audio element are as follows:

• autoplay: This is the attribute in which the browser will start playing the audio as soon as it can without loading
• buffered: This is the attribute that has the buffered time ranges
• controls: This is the attribute that has the browser display controls
• loop: This is the attribute that decides whether or not to loop the audio
• muted: This is the attribute that decides whether or not to mute the audio
• played: This is the attribute that has the time ranges of the audio played
• src: This is the attribute that gives the URL of the audio
• volume: This is the attribute that ranges the volume from 0.0 to 1.0

Description

The audio element was introduced in HTML5. You can add an audio to your page and make the browser play it.

You can also use the source element to include multiple sources in case the browser can play a certain type of file. If the browser does not support the audio element or the file type, you can put fallback content into the element.

Here is an example using the audio element:

<audio src="test.mp3" autoplay loop>
    Your browsers does not support the audio element.
</audio>

See also

You can also refer to the source and track attributes to find out more about the audio element.

source

The syntax of the source element is as follows:

<source src type />

Attributes

The attributes that are used in the source element are as follows:

• src: This is the URL of the resource
• type: This is the MIME type of the resource

Description

The source element is used to add multiple sources to the audio, picture, and video elements. It must be a child of one of these elements. You can use this to specify multiple formats of the same resource. For example, you can have two different video encodings for a video. If the browser cannot play the first, it will fall back to the other.

Here is an example with an audio element:

<audio autoplay controls>
    <source src="test.ogg" type="audio/ogg" />
    <source src="test.mp3" type="audio/mpeg">
</audio>

See also

You can also refer to the audio and video attributes to find out more about the audio element.

track

The syntax of the track element is as follows:

<track default kind label src />

Attributes

Here are the attributes that are used in the track element:

• default: This states whether the chosen track is the default track or not.
• kind: This states the different kinds of tracks that can be loaded. Here are the values: subtitles, captions, descriptions, chapters, or metadata.
• label: This is the title of the track.
• src: This is the URL of the resource.

Description

You will mainly use the track element to add captions or subtitles to videos.

Here is an example video with captions:

<video src="test.mp4">
    <track label="English" kind="captions" src="en.vtt" default>
    <track label="Spanish" kind="captions" src="sp.vtt">
</video>