HTML tags for embedding content

6. HTML tags for embedding content

HTML provides several tags for embedding content within a web page.

Contenidos del artículo

6.1. Tags for embedding content

Here are some commonly used tags for embedding different types of content:

Tag	Description
`<img>`	Used to embed images.
`<iframe>`	Used to embed content from another web page within the current page.
`<embed>`	Used to embed multimedia content, such as Flash or interactive media.
`<object>`	Used to embed multimedia content, such as Flash, audio, or video.
`<video>`	Used to embed videos. View more
`<audio>`	Used to embed audio files. View more
`<source>`	Used as a child element within <video> or <audio> tags to specify alternative media sources (e.g., different file formats or resolutions) for the browser to choose from.
`<canvas>`	Used to embed dynamic, scriptable graphics and animations. View more
`<svg>`	Used to embed scalable vector graphics.

Table 6.1. Tags for embedding content

Example

<!DOCTYPE html>
<html>
<head>
  <title>Embedding Content Example</title>
</head>
<body>
  <h1>Embedding Content Example</h1>

  <!-- Embedding an image -->
  <img src="image.jpg" alt="Image">

  <!-- Embedding a video -->
  <video src="video.mp4" controls></video>

  <!-- Embedding an audio -->
  <audio src="audio.mp3" controls></audio>

  <!-- Embedding an external web page -->
  <iframe src="https://www.example.com"></iframe>

  <!-- Embedding external content using plugins -->
  <embed src="content.swf">

  <!-- Embedding multimedia content or plugins -->
  <object data="content.swf" type="application/x-shockwave-flash"></object>

  <!-- Embedding a canvas for drawing graphics -->
  <canvas id="myCanvas" width="200" height="200"></canvas>

  <!-- Embedding scalable vector graphics -->
  <svg width="400" height="180">
    <rect x="50" y="20" width="300" height="100" style="fill:blue" />
  </svg>
</body>
</html>

6.2. `img` tag

The most common attributes in HTML image tags are:

src: specifies the path or URL of the image.
alt: provides alternative text that is displayed if the image cannot be loaded.
title: provides descriptive text that is displayed when hovering over the image.
width: specifies the width of the image in pixels or as a percentage of the available width.
height: specifies the height of the image in pixels or as a percentage of the available height.
border: specifies the width of the border around the image. This attribute is no longer used, it is better to use CSS.
align: specifies the alignment of the image. Values: left|right|middle|top|bottom. This attribute is no longer used, it is better to use CSS.

Here’s an example of an image tag using these attributes:

<img src="image.jpg" alt="Image description" title="Image title" width="300" height="200">

In this example, the image is loaded from the «image.jpg» file. If the image fails to load, the text «Image description» will be displayed. When hovering over the image, the text «Image title» will be shown. The image will have a width of 300 pixels and a height of 200 pixels.

6.3. Embed YouTube videos & playlists

You can add a YouTube video or playlist to a website by embedding it.

Go to the YouTube video or playlist you want to embed and click SHARE .
From the list of Share options, click Embed.
From the box that appears, copy the HTML code.

6.4. Embed a Google map

You can add a Google map to a website by embedding it.

Go to the map you want to embed and click Menu .
Click Share or embed map.
Click Embed map.
To the left of the text box, pick the size you want by clicking the Down arrow .
From the box that appears, copy the HTML code.

CodePen example

Exercise

Test

6. HTML tags for embedding content

6.1. Tags for embedding content

6.2. img tag

6.3. Embed YouTube videos & playlists

6.4. Embed a Google map

6.2. `img` tag