<img> Tags

The <img> tag in HTML is used to embed images in a webpage. This tag is a self-closing tag, meaning it does not require a closing tag. Here are some essential attributes and a basic example of how to use the <img> tag:

Attributes:

src: Specifies the path to the image (URL).
alt: Provides alternative text for the image, which is important for accessibility. This text is displayed if the image fails to load.
width: Sets the width of the image (in pixels or percentage).
height: Sets the height of the image (in pixels or percentage).
title: Specifies extra information about the image, generally shown as a tooltip when the mouse hovers over the image.
loading: Specifies how the image should be loaded (e.g., lazy for lazy-loading images).
style: Allows for inline CSS styling for the image.
        

<img src="../assets/img/hello.png" alt="description" width="200px" height="200px">

Video & Audio Tags

This tutorial aims to provide a comprehensive guide on using <video> and <audio> tags in HTML to embed media files.

Common Video Formats

There are many video formats out there. The MP4, WebM, and Ogg formats are supported by HTML.

The MP4 format is recommended by YouTube.

<video> Tag

The HTML <video> element is used to show a video on a web page.


<video src="../assets/videos/mov_bbb.mp4" controls></video>

Attributes:

Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.

<audio> Tag

The <audio> tag is used to embed audio files in an HTML document. It also supports multiple attributes for control.


<audio src="../assets/audio/flow-211881.mp3" controls></audio>

Attributes:

Note: Only MP3, WAV, and Ogg audio are supported by the HTML standard.

<iframe> Tag

The <iframe> tag in HTML is used to embed another HTML document within the current document. It essentially allows you to embed another webpage into your webpage. This can be useful for displaying content such as videos, maps, or other interactive content from third-party sites.


<iframe src="https://www.wikipedia.org/" width="450px"></iframe>

Attributes:

Practical Examples

Embedding a YouTube Video


<iframe src="https://www.youtube.com/embed/n4OFVR3V6G8" frameborder="0" allowfullscreen></iframe>

Embedding Google Maps


<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d24567.84702602105!2d78.59322432913909!3d27.08450541198498!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39744bce0745fc55%3A0xaca626641b821c20!2sMSK%20Institute!5e1!3m2!1sen!2sin!4v1730269587243!5m2!1sen!2sin" width="500" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"  frameborder="0"></iframe>

Conclusion

iFrames offer a convenient way to embed external content into your web pages. Their flexibility and ease of use make them an invaluable tool for modern web development.

HTML YouTube Videos

The easiest way to play videos in HTML is to use YouTube.

Struggling with Video Formats?

Converting videos to different formats can be difficult and time-consuming. An easier solution is to let YouTube play the videos in your web page.

YouTube Video Id

YouTube will display an id (like tgbNymZ7vqY), when you save (or play) a video. You can use this id and refer to your video in the HTML code.

Playing a YouTube Video in HTML

To play your video on a web page, do the following:

Example


<iframe width="420" height="315" src="https://www.youtube.com/embed/n4OFVR3V6G8"></iframe>

YouTube Autoplay + Mute

You can let your video start playing automatically when a user visits the page by adding autoplay=1 to the YouTube URL. However, automatically starting a video is annoying for your visitors!

Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.

YouTube - Autoplay + Muted


<iframe width="420" height="315" src="https://www.youtube.com/embed/n4OFVR3V6G8?autoplay=1&mute=1"></iframe>

YouTube Playlist

A comma-separated list of videos to play (in addition to the original URL).

YouTube Loop

Add loop=1 to let your video loop forever.

YouTube - Loop


<iframe width="420" height="315" src="https://www.youtube.com/embed/AB4JZr9nWCY?playlist=PLbEif3LMBbrxFaXONS&loop=1"></iframe>

YouTube Controls

Add controls=0 to not display controls in the video player.

YouTube - Controls


<iframe width="420" height="315" src="https://www.youtube.com/embed/n4OFVR3V6G8?controls=0"></iframe>

Example of a Full YouTube Embed


<iframe width="560" height="315" src="https://www.youtube.com/embed/aqz-KE-bpKQ?si=ta-VxWuqvEz98EdY" title="YouTube video player" 
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
allowfullscreen></iframe>

The <object> Element

The <object> element is supported by all browsers. It defines an embedded object within an HTML document. It was designed to embed plug-ins (like Java applets, PDF readers, and Flash Players) in web pages, but can also be used to include HTML in HTML:

Example


<object width="100%" height="500px" data="https://mskinstitute.github.io/"></object>

Or Images if You Like


<object data="audi.jpeg"></object>

The <embed> Element

The <embed> element is supported in all major browsers. It defines an embedded object within an HTML document. Web browsers have supported the <embed> element for a long time. However, it has not been a part of the HTML specification before HTML5.

Note that the <embed> element does not have a closing tag. It cannot contain alternative text. The <embed> element can also be used to include HTML in HTML:

Example


<embed width="100%" height="500px" src="https://mskinstitute.github.io/">

HTML SVG Graphics

SVG defines vector-based graphics in XML format.

What is SVG?

Examples: (svg) v/s (jpg)

The HTML <svg> Element

The HTML <svg> element is a container for SVG graphics. SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

SVG Circle


<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>

SVG Rectangle


<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>

SVG Rounded Rectangle


<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

SVG Star


<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

SVG Logo


<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">MSK</text>
  Sorry, your browser does not support inline SVG.
</svg>
<<< Back Next >>>