HTML Tutorial: HTML Images
Learn how to display images, use attributes, and style them with colors and borders
Images make websites visually appealing. HTML uses the <img> tag to display images.
1️⃣ Basic Image
INPUT:
<img src="https://via.placeholder.com/150" alt="Placeholder Image">
OUTPUT:
✔️ src specifies image URL
✔️ alt provides alternative text if image cannot load
2️⃣ Image with Width and Height
INPUT:
<img src="https://via.placeholder.com/300"
alt="Resized Image"
width="200"
height="150"
>
OUTPUT:
✔️ Width and height adjust the image size ✔️ Maintains aspect ratio if only one dimension is specified
3️⃣ Styled Image with Border and Rounded Corners
INPUT:
<img
src="https://via.placeholder.com/150"
alt="Styled Image"
style="border:4px solid #0077cc; border-radius:12px;"
>
OUTPUT:
✔️ border adds border color and thickness
✔️ border-radius creates rounded corners
4️⃣ Responsive Image
Use CSS max-width:100% and height:auto to make images responsive.
INPUT:
<img
src="https://via.placeholder.com/600x400"
alt="Responsive Image"
style="max-width:100%; height:auto;"
>
OUTPUT:
✔️ Responsive images resize automatically based on screen width ✔️ Essential for mobile-friendly websites
🎯 Best Practices
- Always include
altfor accessibility - Use proper image dimensions for performance
- Use CSS for borders, padding, and responsive design
- Optimize images to reduce load time
🚀 What’s Next?
👉 HTML Favicon
Next lesson will cover:
- How to add website favicon using
<link> - Favicons in different sizes and formats
- Best practices for branding and browser compatibility
Images enhance the visual appeal of websites and improve user engagement.