Embedding images using <img>
The <img> tag in HTML is used to embed images into a webpage, helping enhance visual appeal and user understanding. It is a self-closing tag and does not require a closing tag.
Basic Syntax
<img src=”image.jpg” alt=”Description of image”>
Attributes:
| Attribute | Purpose |
|---|---|
src |
(Required) URL or path to the image file |
alt |
(Required) Descriptive alternative text for accessibility and SEO |
width |
Sets the display width (in pixels or %) |
height |
Sets the display height (in pixels or %) |
title |
Tooltip shown on hover (optional) |
loading |
Improves performance with lazy loading (lazy, eager) (optional) |
Examples
Local Image:
<img src=”images/logo.png” alt=”Company Logo” width=”150″>
External Image:
<img src=”https://example.com/banner.jpg” alt=”Website Banner”>
Responsive Image:
<img src=”photo.jpg” alt=”Nature” style=”max-width:100%; height:auto;”>
Advanced Usage
With title (hover text):
<img src=”team.jpg” alt=”Team Photo” title=”Our Team”>
With loading=”lazy” (performance-friendly):
<img src=”large-image.jpg” alt=”High-resolution landscape” loading=”lazy”>
Accessibility Tips
- Always use a descriptive alt to help screen readers.
- Avoid using images as buttons without proper labels.
- Use CSS for decorative images and mark them with alt=”” if they’re purely visual.
Common Mistakes
- Missing alt: Affects accessibility and SEO.
- Broken src path: Image won’t load — check file paths and URLs.
- Hardcoded dimensions without responsiveness: May look bad on mobile.
Complete Example:
<!DOCTYPE html>
<html>
<body>
<h2>Team Introduction</h2>
<img src=”team.jpg” alt=”Our Team Standing Together” width=”600″ loading=”lazy”>
<p>Meet the amazing people behind our company.</p>
</body>
</html>
alt, title, width, height attributes
When embedding images in HTML using the <img> tag, four key attributes—alt, title, width, and height—play important roles in accessibility, user experience, performance, and design.
alt Attribute (Alternative Text)
Purpose:
- Provides text description of the image for screen readers and when the image fails to load.
- Improves accessibility and is crucial for SEO.
Example:
<img src=”dog.jpg” alt=”A brown dog playing in the park”>
Best Practices:
- Keep it concise but descriptive
- Use alt=”” for decorative images (screen readers will skip it)
title Attribute (Tooltip Text)
Purpose:
- Adds a tooltip that appears when users hover over the image.
- Can offer extra context or a short label.
Example:
<img src=”product.png” alt=”Blue sneakers” title=”Click to view product details”>
Notes:
- Not a replacement for alt (screen readers may ignore title)
- Use for supplementary information only
width and height Attributes (Image Dimensions)
Purpose:
- Control the display size of the image.
- Can be defined in pixels (px) or percentages (%).
Example (Fixed size):
<img src=”photo.jpg” alt=”Mountain view” width=”300″ height=”200″>
Example (Responsive with CSS):
<img src=”photo.jpg” alt=”Mountain view” style=”width: 100%; height: auto;”>
Tips:
- Always maintain aspect ratio to avoid image distortion.
- Set dimensions to reduce layout shift (better performance and UX).
- Avoid stretching images by mismatching actual and display dimensions.
Full Example:
<img
src=”team.jpg”
alt=”Our company team smiling during the annual meetup”
title=”Meet our team”
width=”600″
height=”400″>
Embedding videos and audio (<video>, <audio>)
HTML5 introduced the <video> and <audio> tags, making it easy to embed multimedia content without needing plugins like Flash. These tags support multiple file formats and provide playback controls for users.
Embedding Videos with <video>
Basic Syntax:
<video src=”movie.mp4″ controls></video>
Common Attributes:
<table style=”width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; margin: 20px 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);”>
<thead>
<tr style=”background-color: #f5f7fa;”>
<th style=”padding: 12px 15px; text-align: left; border-bottom: 2px solid #e1e5eb;”>Attribute</th>
<th style=”padding: 12px 15px; text-align: left; border-bottom: 2px solid #e1e5eb;”>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style=”padding: 12px 15px; border-bottom: 1px solid #e1e5eb;”><code style=”background: #f0f4f8; padding: 2px 5px; border-radius: 3px;”>src</code></td>
<td style=”padding: 12px 15px; border-bottom: 1px solid #e1e5eb;”>Path to the video file</td>
</tr>
<tr>
<td style=”padding: 12px 15px; border-bottom: 1px solid #e1e5eb;”><code style=”background: #f0f4f8; padding: 2px 5px; border-radius: 3px;”>controls</code></td>
<td style=”padding: 12px 15px; border-bottom: 1px solid #e1e5eb;”>Displays built-in playback controls (play, pause, volume, etc.)</td>
</tr>
<tr>
<td style=”padding: 12px 15px; border-bottom: 1px solid #e1e5eb;”><code style=”background: #f0f4f8; padding: 2px 5px; border-radius: 3px;”>autoplay</code></td>
<td style=”padding: 12px 15px; border-bottom: 1px solid #e1e5eb;”>Starts playing automatically when page loads</td>
</tr>
<tr>
<td style=”padding: 12px 15px; border-bottom: 1px solid #e1e5eb;”><code style=”background: #f0f4f8; padding: 2px 5px; border-radius: 3px;”>loop</code></td>
<td style=”padding: 12px 15px; border-bottom: 1px solid #e1e5eb;”>Plays the video in a loop</td>
</tr>
<tr>
<td style=”padding: 12px 15px; border-bottom: 1px solid #e1e5eb;”><code style=”background: #f0f4f8; padding: 2px 5px; border-radius: 3px;”>muted</code></td>
<td style=”padding: 12px 15px; border-bottom: 1px solid #e1e5eb;”>Mutes the video by default</td>
</tr>
<tr>
<td style=”padding: 12px 15px; border-bottom: 1px solid #e1e5eb;”><code style=”background: #f0f4f8; padding: 2px 5px; border-radius: 3px;”>poster</code></td>
<td style=”padding: 12px 15px; border-bottom: 1px solid #e1e5eb;”>Displays an image before the video starts</td>
</tr>
<tr>
<td style=”padding: 12px 15px;”><code style=”background: #f0f4f8; padding: 2px 5px; border-radius: 3px;”>width, height</code></td>
<td style=”padding: 12px 15px;”>Sets dimensions of the video player</td>
</tr>
</tbody>
</table>
Example with Multiple Sources:
<video width=”640″ height=”360″ controls poster=”preview.jpg”>
<source src=”video.mp4″ type=”video/mp4″>
<source src=”video.webm” type=”video/webm”>
Your browser does not support the video tag.
</video>
Embedding Audio with <audio>
Basic Syntax:
<audio src=”audio.mp3″ controls></audio>
Common Attributes:
| Attribute | Description |
|---|---|
src |
Path to the audio file (MP3, WAV, OGG) |
controls |
Displays audio controls (play, pause, volume) |
autoplay |
Starts playing automatically (may be blocked by browsers) |
loop |
Plays the audio on repeat |
muted |
Starts muted (no audio output) |
Example with Multiple Sources:
<audio controls>
<source src=”audio.mp3″ type=”audio/mpeg”>
<source src=”audio.ogg” type=”audio/ogg”>
Your browser does not support the audio element.
</audio>
Best Practices
- Always include multiple file types (.mp4, .webm, .ogg, etc.) for wider browser compatibility.
- Provide a fallback message for unsupported browsers.
- Use the preload attribute (auto, metadata, none) to control loading behavior.
- Use muted autoplay together to allow autoplay on most modern browsers.
Complete Example:
<h2>Product Demo</h2>
<video width=”600″ controls poster=”demo-thumbnail.jpg”>
<source src=”demo.mp4″ type=”video/mp4″>
<source src=”demo.webm” type=”video/webm”>
Your browser does not support the video tag.
</video>
<h2>Background Music</h2>
<audio controls loop>
<source src=”background.mp3″ type=”audio/mpeg”>
<source src=”background.ogg” type=”audio/ogg”>
Your browser does not support the audio element.
</audio>
Using <iframe> for YouTube, Google Maps, etc.
The <iframe> (inline frame) tag in HTML allows you to embed external content like YouTube videos, Google Maps, documents, and other webpages directly into your own webpage, preserving the source’s layout and functionality.
Basic Syntax of <iframe>
<iframe src=”URL” width=”WIDTH” height=”HEIGHT”></iframe>
| Attribute | Description |
|---|---|
src |
The URL of the page to embed (required) |
width |
Width of the embedded frame (in pixels or percentage) |
height |
Height of the embedded frame (in pixels) |
allowfullscreen |
Enables fullscreen option (particularly for videos) |
loading |
Set to "lazy" to delay loading until frame is near viewport (optional) |
frameborder |
Set to "0" to remove the border (deprecated but still commonly used) |
Embedding a YouTube Video
Example:
<iframe
width=”560″
height=”315″
src=”https://www.youtube.com/embed/dQw4w9WgXcQ”
title=”YouTube video player”
frameborder=”0″
allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture”
allowfullscreen>
</iframe>
Notes:
- YouTube gives you a shareable embed code under the “Share > Embed” option.
- The allow attribute specifies what features are enabled (e.g., autoplay).
- Always use the official embed URL, not the regular video URL.
Embedding Google Maps
Example:
<iframe
src=”https://www.google.com/maps/embed?pb=…”
width=”600″
height=”450″
style=”border:0;”
allowfullscreen=””
loading=”lazy”
referrerpolicy=”no-referrer-when-downgrade”>
</iframe>
Steps:
- Go to Google Maps.
- Search a location.
- Click “Share” → “Embed a map”.
- Copy the <iframe> code and paste into your HTML.
Embedding PDFs or Webpages
<iframe src=”documents/sample.pdf” width=”100%” height=”500px”></iframe>
<iframe src=”https://example.com” width=”800″ height=”600″></iframe>
Best Practices
- Use descriptive title attribute for accessibility.
- Set appropriate width and height for layout control.
- Use loading=”lazy” for performance.
- Avoid using <iframe> for sensitive or interactive content unless needed.
- Never embed untrusted sources due to security risks (e.g., XSS).
Complete Example:
<h3>Watch Our Intro</h3>
<iframe
width=”560″
height=”315″
src=”https://www.youtube.com/embed/abc123″
title=”Intro Video”
frameborder=”0″
allow=”autoplay; encrypted-media”
allowfullscreen>
</iframe>
<h3>Find Us Here</h3>
<iframe
src=”https://www.google.com/maps/embed?pb=…”
width=”600″
height=”450″
style=”border:0;”
allowfullscreen
loading=”lazy”>
</iframe>