The following elements are used to embed media or other objects into the document.
The img
element is the image element:
<img alt crossorigin height ismap sizes src srcset width />
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.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.
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.
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"/>
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.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>
The syntax of the embed
element is as follows:
<embed height src type width/>
The attributes that are used in the embed
element are as follows:
height
: This is the attribute to set the heightsrc
: This is the URL of the object to be embeddedtype
: This is the MIME type of the objectwidth
: This is an attribute to set the widthThe syntax of the
object
element is as follows:
<object data height type width></object>
Here are the attributes that are used in the object
element:
data
: This is the URL of the object to be embeddedheight
: This is the attribute to set the heighttype
: This is the MIME type of the objectwidth
: This is the attribute to set the widthThe
param
element is the parameter element:
<param name="movie" value="video.swf"/>
The attributes that are used in the param
element are as follows:
name
: This is the name of the parametervalue
: This is the value of the parameterThe 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>
The syntax of the video
element is as follows:
<video autoplay buffered controls crossorigin height loop muted played poster src width></video>
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 stoppedbuffered
: This is a read
object that tells how much of the video has bufferedcontrols
: This is a Boolean attribute to decide whether to display the controlscrossorigin
: 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 nameheight
: This is the attribute to set the heightloop
: This states whether or not to loop the videomuted
: This states whether or not to mute the audioplayed
: This is a read
object, which reads how much of the video has been playedposter
: This is a URL of an image that will be displayed until the video can playedsrc
: This is the URL of the videowidth
: This is the attribute to set the widthThe 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>
The syntax of the audio
element is as follows:
<audio autoplay buffered controls loop muted played src volume></audio>
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 loadingbuffered
: This is the attribute that has the buffered time rangescontrols
: This is the attribute that has the browser display controlsloop
: This is the attribute that decides whether or not to loop the audiomuted
: This is the attribute that decides whether or not to mute the audioplayed
: This is the attribute that has the time ranges of the audio playedsrc
: This is the attribute that gives the URL of the audiovolume
: This is the attribute that ranges the volume from 0.0 to 1.0The 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>
The syntax of the source
element is as follows:
<source src type />
The attributes that are used in the source
element are as follows:
src
: This is the URL of the resourcetype
: This is the MIME type of the resourceThe 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>
The syntax of the track
element is as follows:
<track default kind label src />
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.18.191.189.23