• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

HTML Images

← Previous Next →

🔹 What is the <img> Tag?

The <img> tag is used to embed images into a webpage. It is a self-closing tag, meaning it doesn't need a closing </img>.

🔹 Basic Syntax
<img src="image.jpg" alt="Description">
Attribute Purpose
src Specifies the path to the image file
alt Provides alternative text if the image fails
🔹 Example
<img src="logo.png" alt="Company Logo">

🔹 Adding Width and Height

You can set size using the width and height attributes (in pixels):

<img src="photo.jpg" width="300" height="200" alt="A Photo">

Or use CSS:

<img src="photo.jpg" style="width:100%; height:auto;" alt="Responsive Image">

🔹 Image from a Folder

<img src="images/pic1.jpg" alt="Gallery Image">

🔹 Image from URL

<img src="https://example.com/banner.jpg" alt="External Image">

🔹 Making Images Clickable

Wrap the image inside an <a> tag:

<a href="https://example.com">
  <img src="logo.png" alt="Go to site">
</a>

🔹 Responsive Images

<img src="image.jpg" style="max-width:100%; height:auto;" alt="Responsive">

📝 This ensures the image scales with screen size.

🔹 Image with Title (Tooltip)

<img src="book.jpg" alt="Book Cover" title="Click to view book details">

Practice Questions

Q1. Insert an image named banner.jpg into a webpage.

Q2. Add an alternative text “Nature Photo” to an image.

Q3. Display an image with width 500px and height 300px.

Q4. Create a responsive image using CSS.

Q5. Link an image to https://example.com.

Q6. Load an image from an external URL.

Q7. Show an image located inside a folder named gallery.

Q8. Use title attribute to show a tooltip on hover.

Q9. Add multiple images in a row using HTML.

Q10. Create an image gallery layout with three images.

HTML Images Quiz

Q1: Which tag is used to display images in HTML?

A. <image>
B. <img>
C. <src>
D. <pic>

Q2: What does the alt attribute in an image tag do?

A. Changes the alignment
B. Sets background color
C. Displays text if image fails to load
D. Sets transparency

Q3: Which attribute specifies the image path?

A. link
B. href
C. src
D. url

Q4: What is the correct syntax to add an image of dog.jpg with alternative text?

A. <img link="dog.jpg" alt="Dog">
B. <img src="dog.jpg" title="Dog">
C. <img src="dog.jpg" alt="Dog">
D. <image src="dog.jpg" alt="Dog">

Q5: How do you make an image responsive in HTML?

A. Use width: auto;
B. Use height: auto; width: 100%;
C. Use alt and title
D. Use responsive="true"

Q6: Which of the following tags is self-closing?

A. <img>
B. <a>
C. <p>
D. <div>

Q7: What happens if the image file is missing?

A. Page breaks
B. Image is downloaded again
C. Nothing is shown
D. alt text is displayed

Q8: Which attribute shows a tooltip when hovering over the image?

A. title
B. hover
C. tooltip
D. alt

Q9: Which format is commonly used for web images?

A. .doc
B. .mp3
C. .jpg
D. .exe

Q10: How do you center an image using CSS?

A. text-align: center; on <img>
B. margin: auto; display: block;
C. center="true"
D. Use <center> tag only
← Previous Next →
Login
Go Back Top