Home 〉 HTML Tutorials 〉 HTML img Tag | Complete Guide to HTML Image Tag with Syntax & Attributes
HTML img Tag | Complete Guide to HTML Image Tag with Syntax & Attributes !
HTML img Tag | Complete Guide to HTML Image Tag with Syntax & Attributes !
What is the correct way to use images in HTML?
In this detailed blog post on the HTML img tag, we learned its syntax, all key attributes, inline styling methods, and practical examples. This tag is an inline, empty HTML element used to display images from a source path. Proper use of attributes like 'alt' and 'loading' ensures better performance, accessibility, and SEO. Additional topics like the '<picture>' tag and image optimization were also covered for enhanced learning. The complete blog post on HTML img tag is as follows.
Introduction
In HTML, the '<img>' tag is used to embed images in a web page. Images are a vital part of modern websites, enhancing visual appeal and improving user experience. The '<img>' tag does not require a closing tag and it helps in displaying images from a given source ('src').
Syntax of HTML '<img>' Tag
Syntax ✍
<img src="image.jpg" alt="Description of image">
- '<img>': The HTML tag used to embed an image.
- 'src': Stands for “source” and specifies the path to the image file.
- 'alt': Provides alternative text for the image, useful for accessibility and SEO.
Type of Element:
The '<img>' tag is an empty and inline-level element. It does not have any content between opening and closing tags, and it behaves inline within text.
HTML img Tag Attributes with Examples
Let's explore the commonly used attributes of the '<img>' tag:
1. 'src' (Required)
Specifies the path or URL of the image.
Code : 1 📝 
<!DOCTYPE html>
<html>
<body>
<img src="/images/image.jpg" alt="Image of a Garden">
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
- This displays an image named 'image.jpg' from the from 'images' folder
- You can displays an image named 'image.jpg' from the current directory with specifing 'path'
- Refer to our 'file path' tutorial for more information on 'filename' and 'path'
2. 'alt'
Specifies alternate text for the image if it fails to load.
Code : 2 📝
<!DOCTYPE html>
<html>
<body>
<img src="not-found.png" alt="Image not found">
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Displays "Image not found" text if the image cannot be loaded.
3. 'width' and 'height'
Sets the width and height of the image in pixels.
Code : 3 📝
<!DOCTYPE html>
<html>
<body>
<img src="/images/image.jpg" alt="Beautiful Garden" width="200" height="150">
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Displays the image with dimensions 200px by 150px.
4. 'title'
Shows a tooltip when the user hovers over the image.
Code : 4 📝
<!DOCTYPE html>
<html>
<body>
<img src="/images/image.jpg" alt="Garden Image" title="The Beautiful Garden">
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
A tooltip appears when the user hovers over the image.
5. 'loading'
Determines how the image should load. Values: 'lazy', 'eager'.
Code : 5 📝
<!DOCTYPE html>
<html>
<body>
<img src="/images/image.jpg" alt="Garden Image" loading="lazy">
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Loads the image lazily, improving page performance.
6. 'style' (For inline CSS)
Adds custom CSS to the image directly.
Adds width, height, border, border-radius, and margin using inline CSS.
Inline CSS Styling Tips
Use these inline styles to improve presentation:
Code : 6 📝
<!DOCTYPE html>
<html>
<body>
<img src="/images/image.jpg" alt="Styled Image" style="width:150px; height:100px; border:2px solid #000; border-radius:8px; margin:10px;">
<img src="/images/image.jpg" alt="Flowers" style="width:200px; height:150px; border-radius:10px; margin:10px; border:1px solid #ccc;">
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
This makes the image cleaner, with padding and border styling.
Conclusion
The HTML '<img>' tag is essential for embedding images into web pages. By understanding the attributes like 'src', 'alt', and 'width', and using good inline styling, you can make your images not only visually appealing but also SEO-friendly. Make sure to always include the 'alt' attribute for accessibility and better Google indexing.
Suggested Topics:
- Complete Guide to HTML Attributes with Examples and Syntax
- HTML Block, Inline, and Empty Elements Explained with Examples
- CSS Border Property Explained with Easy Examples for Beginners
- CSS Border-Radius Property Explained with Examples for Beginners
- CSS Margin Explained with Examples - Master Spacing in Web Design
- CSS Width and Height Property Tutorial with Examples for Beginners
Related Topics:
- HTML '<figure>' Tag - Learn Figure, Figcaption & Cite Tags with Examples
- CSS Media Query Tutorial for Responsive Design with Examples
Frequently Asked Questions (FAQs)
What is the use of the 'alt' attribute in HTML '<img>' tag?
It provides alternate text when the image cannot be displayed and helps screen readers understand the image content.
Is the '<img>' tag a block or inline element?
It is an inline-level and empty element.
How can I style an image in HTML?
You can use the 'style' attribute to apply inline CSS like width, border, padding, and more.
What is lazy loading in HTML '<img>' tag?
It delays loading images until they are visible in the viewport, improving performance.