When we start building a website with a modern design theme, images and media such as videos play an important role in enriching content, conveying information visually, and enhancing the visitor experience on our website. However, displaying images or media is not enough just by “inserting” the files. We also need to understand the proper use of HTML tags and ensure that the media used is search engine-friendly (SEO-friendly). In this article, we will discuss how to display images, embed videos, and best SEO practices for media content.

Displaying Images

To display images in HTML, we can use the <img> tag. This tag is self-closing (without a closing tag) and requires two important attributes: src and alt. Before looking at an example of using the <img> tag, create a file named index.html in the folder and place an image in that folder. Once you have done that, here is an example of using the img tag to display an image in a browser.

<img src="mypicture.png" alt="picture from my computer" />

Let's discuss the code above.

• <img> opening and closing tag.
• src specifies the URL or path of the image.
• alt serves as a description of the image if it fails to load, and is also important for accessibility and SEO.

In addition, there are several tips for displaying images on browsers that are SEO-friendly. Among others are:

1. Always use the optimal image format with the WebP or png extension so that pages load quickly.
2. Give descriptive file names to images, such as ‘html-seo-tips.png’.
3. Never forget to fill in the alt attribute with a relevant and natural description.

Displaying Videos

We can also display videos in a browser using the <video> tag without the need for additional plugins. Before we move on to examples of using the <video> tag, add a video to the folder with index.html. Here is an example of using the <video> tag to display a video in a browser.

<video width="600" controls>
	<soruce src="myvideo.mp4" type="video/mp4">
	Your browser does not support the video tag.
</video>

Explanation of the code above.

• <video> opening tag to display media content in the form of video.
• width functions to set the width of the video display in pixels.
• controls functions to display standard video player controls such as play/pause buttons, volume, fullscreen buttons, and others.
• <source> is used to define the video source that will be displayed to the browser.
• Your browser does not support the video tag. text will be displayed if the user's browser does not support the video element. In addition to displaying videos internally, we can display videos using external media such as YouTube using the <iframe> tag. Here is an example.

<iframe width="560" height="315" src="" 
  title="Tutorial HTML" frameborder="0" allowfullscreen>
</iframe>

In the <src attribute, you can add the URL of the video you want to display.

Best Media Practices for SEO

To ensure that the media content displayed does not slow down the website loading speed, please note the following.

1. Optimize the media file size before displaying it to the browser.
2. Use file formats such as WebP, PNG, and MP4.
3. Use hyphens (-) instead of spaces when naming media files.
4. Use lazy loading (specifically for images and iframes) so that media is loaded only when needed. Example of lazy loading on images.

<img src="tutorial-html.webp" alt="Tutorial HTML" loading="lazy"/>

Conclusion

Using images and media in HTML is not just about appearance, but also an important part of creating the best experience for users visiting our website. By understanding how tags such as <img>, <video>, and <iframe> work, we can create content that is attractive, lightweight, and easy for search engines to find.

Thankyou, see you in the next article.