So far, we've only been dealing with text-based HTML elements, which is quite bland. In practice, you can make your webpage more colorful by embedding media files such as images, videos, and more.
Images in HTML
Let's start with the <img> element, which is used to embed images into your webpage. Assuming you have a file structure like this:
1.
2├── images
3│ └── image.png
4└── index.htmlTo embed the image file, go to your index.html, and add an <img> tag.
1<img src="/images/image.png" alt="This is an image" />The src attribute specifies the path to the image file. You can use either relative or absolute addresses here, but absolute addresses are highly recommended to avoid confusion.
You can also link to a remote image file hosted on a different server.
1<img
2 src="https://images.unsplash.com/photo-1706014887612-ae5ca8cbb86e?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDgwNTYyNTF8&ixlib=rb-4.0.3&q=85"
3 alt="This is an image" />The alt attribute specifies the alternative text that will be displayed when the image fails to load.
The text should describe the content of the image and should never be neglected, just in case the browser doesn't support the image type, the image file does not exist anymore, or the user is visually impaired and needs to use a screen reader.
The lack of alternative text will have a negative impact on your SEO score.
Specify image size
When running your website in a local environment, the embedded images will be loaded almost instantly. However, in a production environment, the image file will take some time to be transmitted, which means the textual content will be loaded before the image.
This will cause a significant layout shift since the images usually take up a large space, pushing the loaded textual content down, which will lead to a bad user experience.
Instead, you should specify a size for the images so that the browser will save enough space for them. When the image is loaded, it will simply fill the reserved space and not impact the overall layout of the webpage.
1<img src=". . ." alt="This is an image" width="500" height="500" />You can use either the width or height attribute, or both. If both are specified, the browser will calculate the aspect ratio before the image is loaded. The aspect ratio will then be used to reserve enough space for the image, reducing or even preventing a layout shift when the image is loaded.
This may cause the image to be stretched or squished, but this problem can be solved using the object-fit property.
Image link
You can also turn the image into a link by placing <img> inside <a> like this:
1<a href=". . .">
2 <img src=". . ." alt="This is an image" width="500" height="500" />
3</a>Vector graphics
The images we discussed above are bitmap images, meaning they are made of pixels. When you zoom in on the images, they become pixelated.
There is another type of image you will encounter called vector images. They are defined programmatically by paths, shapes, and so on. When you zoom in on the vector image, it will not get pixelated.
In the field of web development, the standard vector image format is SVG, Scalable Vector Graphics. They are most commonly used to make icons, for instance:
Open demo in new tabAs you can see, they look just like ordinary HTML elements with tags and attributes, and can easily be embedded into your HTML webpages.
Like ordinary images, you can adjust their sizes by changing the width and height attributes.
You don't need to know exactly how to make these SVGs, but if you are interested, there is a full tutorial here.
Videos and audios
The video and audio files can be embedded in a similar manner. For videos, you must use the <video> element and also specify the src attribute.
1<video
2 src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
3 BigBuckBunny
4</video>You may add the controls attribute to display the control buttons.
1<video
2 src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
3 controls>
4 BigBuckBunny
5</video>Just like images, it is best to specify a proper size for your videos so that the browser knows how much space should be reserved.
1<video
2 src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
3 controls
4 width="500">
5 BigBuckBunny
6</video>Audio embedding works similarly.
1<audio src=". . ." controls>Audio file</audio>Embedding webpages
Embedding webpages inside another webpage. This sounds strange, but it is actually very commonly used. For example, the CodePen demos hosted on this site are embedded this way using the <iframe> element. As an example, assuming you have two webpages.
1.
2├── embed.html
3└── index.htmlAnd you need to place embed.html into multiple places of index.html, this is what you can do:
embed.html
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Document</title>
7 </head>
8
9 <body>
10 <p>This is an embed.</p>
11 </body>
12</html>index.html
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Document</title>
7 </head>
8
9 <body>
10 <iframe src="/embed.html" frameborder="1"></iframe>
11 </body>
12</html>
Like any other embeds, it is best to specify a width amd height for your <iframe>.
1<iframe src="/embed.html" frameborder="1" width="500"></iframe>Obsolete embedding technologies
To embed other types of media files, such as PDFs, you can utilize the <embed> or <object> element.
1<object
2 type="application/pdf"
3 data="/media/xxx.pdf"
4 width="250"
5 height="200"></object>In practice, it is unlikely that you'll ever need to do this. If you need to display a PDF, simply link to it using <a>.
Historically, <embed> and <object> are used to embed Adobe Flash components, but today, these technologies have become obsolete, so most modern browsers are not supporting them anymore.