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

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 iframe element is the inline frame element:

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

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

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 attributes that are used in the embed element are as follows:

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"/>

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

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

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>

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

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

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>

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

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>

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

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

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>

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

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

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>

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

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

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>