Do you know how to use image tag in HTML? Have you ever thought about the process of adding an image tag in HTML? If youโre curious to know how to do this or looking for HTML homework help related to this topic, then this article is for you.
HyperText Markup Language forms the basic structure of a webpage. Going through a web page with little to no visual appeal makes your website like a textbook.ย
Therefore, having visual elements like engaging images can help enhance your website and give it an aesthetic appeal. But the question is how can we add images to our website?
For this, we use the image tag in HTML. In this article, we will talk about everything you need to know to add images to your website using HTML.ย
Are you ready to get started? Well then, letโs dive in!
Summary Of The Article:
- HTML is one of the simplest programming languages that helps to define the structure of a web page.
- We can include lists, tables, text, and images on our website with the help of this programming language.
- For all these operations, there are different tags available that describe what kind of content we are adding to our web page.
- We can add images on our web page using the image tag and edit its properties using different attributes under this tag.
What Is an Image Tag In HTML? Know More
In HTML, there are many types of tags are present. What is the purpose of tag in HTML? You may ask.ย
These tags are like the indication to the HTML page that you are going to deal with such things. Using image tags, we can directly add images to certain web pages.
Image tag in HTML is a very useful thing. And it has a simple syntax. This syntax can be easily memorized.
General Syntax: <img src=โโ alt=โโ width=โโ height=โโ>
This tag in HTML, has four most important attributes present. Now, you can ask what is an attribute. The attribute is those filters used for any particular tags in HTML. It is like the parameter of any tag. Based on the attributes, the tags can modify themselves to the choice of the developer.
Some of these attributes are:ย
- Src attribute
- Alt attribute
- Width attribute
- Height attribute
- Style attribute
Among these, three are optional attributes. But it is necessary to know about them. As they are so important. It will help to do modifications to the images as per the developerโs choice. They might be optional but they are very useful.
Now, letโs know about each tag one by one and see how we can add images to our web pages in the section below.
How To Use Image Tag In HTML? Read Below
Now, let us see how to write an image tag in HTML. For this, we must provide the path to the image of our program. Let us see how we can add images in the below steps.
Step 1: Adding Image Using The src Attribute
The src attribute specifies the path (URL) of the image you want to insert into your web page. You can add images stored locally on your computer or from the internet. When your web page loads, the browser gets the image using the src link and displays it.ย
Below is an example of the same.
<!DOCTYPE html>
<html lang="en">
<body>
<h1>Welcome to CodingZap!</h1>
<!-- Adding an image using the img tag -->
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="codingzaplogo.png"><noscript><img src = "codingzaplogo.png"></noscript>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/codingzap.com\/wp-admin\/admin-ajax.php","nonce":"9f6c4cd962","url":"https:\/\/codingzap.com\/how-to-use-image-tag-in-html","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://codingzap.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
From the above code, we can see that we have provided the path of codingzaplogo.png our HTML code. Now, once the browser loads, we will be able to see this image on the web page. Have a look at the output for this example below.
Output:
Step 2: Provide Alt Text using the alt Attribute
You can also use the alt attribute to provide an alternate text to the image. This alt text or alternate text provides useful information to the users in case the image loading takes time.
If, for any reason, the webpage doesnโt reload due to an error or slow connection, this attribute helps in such cases. It will indicate the name of the image.
For example, let us consider uploading an image to our website. We will have to specify the file path and give an alt text to it. Have a look at the code example below.ย
<!DOCTYPE html>
<html lang="en">
<body>
<h1>Welcome to CodingZap!</h1>
<!-- Adding an image using the img tag and providing alt text-->
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt = "CodingZap Logo Image" data-lazy-src="codingzaplogo.png"><noscript><img src = "codingzaplogo.png" alt = "CodingZap Logo Image"></noscript>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/codingzap.com\/wp-admin\/admin-ajax.php","nonce":"9f6c4cd962","url":"https:\/\/codingzap.com\/how-to-use-image-tag-in-html","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://codingzap.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>
Now, if there is some error in displaying the image, the alt text will appear in its place to the users. Alt text is also helpful to the users who use screen readers. Thus, it improves accessibility.
Step 3: Resize the image using the width attribute and height attribute
Often we need to set an image size as per the requirements of our website and the structure Let us now learn how to resize an image using an image tag in HTML. For this, you can use the width attribute and the height attribute.ย
In the below HTML code, we can observe that by specifying the dimensions of the image in pixels(px) we can adjust our image on the page.ย
<!DOCTYPE html>
<html lang="en">
<body>
<h1>Welcome to CodingZap!</h1>
<!-- Adding an image using the img tag and provide alt text and dimensions-->
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20100'%3E%3C/svg%3E" alt = "CodingZap Logo Image" width = "300" height = "100" data-lazy-src="codingzaplogo.png"><noscript><img src = "codingzaplogo.png" alt = "CodingZap Logo Image" width = "300" height = "100"></noscript>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/codingzap.com\/wp-admin\/admin-ajax.php","nonce":"9f6c4cd962","url":"https:\/\/codingzap.com\/how-to-use-image-tag-in-html","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://codingzap.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>
Let us have a look at the output for this example.
Output:
From the output, we can see that the image is wider and appears larger than the one in the previous example.
An alternative to this is the style attribute. The syntax for it is given below.
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt = "CodingZap Logo Image" style="width:300px;height:100px;" data-lazy-src="codingzaplogo.png"><noscript><img src = "codingzaplogo.png" alt = "CodingZap Logo Image" style="width:300px;height:100px;"></noscript>
Well, this is how we use the image tag in HTML to add images to our website or webpage. Let us now take a deeper dive and discuss some additional concepts about the image tag in HTML.
How To Use Background Image Tag In HTML?
Are you tired of having solid color backgrounds on your webpage? Well, you can also add images as backgrounds for it. But how can you use it? Well, for that, you will have to check out the example given below.
<!DOCTYPE html>
<html lang="en">
<!-- Adding background image and style-->
<body style="background-image: url('programming.jpg'); background-size: cover;">
<!-- changing text color for visibility-->
<h1 style="color:white;">Welcome to CodingZap!</h1>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/codingzap.com\/wp-admin\/admin-ajax.php","nonce":"9f6c4cd962","url":"https:\/\/codingzap.com\/how-to-use-image-tag-in-html","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://codingzap.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>
Here, we have added an image as a background cover using the style attribute. We have also changed the H1 heading text color for better visibility over the background. Have a look at the output.
Output:
From the above output, we see that we have successfully added the image as the background of our web page.ย
By now, you must also be wondering how to close image tags in HTML. Well, there is no need to do that as the image tag does not require a closing tag.ย
So I hope that now you can add and modify images on your web pages. Also, if youโre curious to know about website preloaders then you can check out our article.
Conclusion:
As we saw using image tags in HTML is very important.
It is a great feature of HTML files. It helps to make the webpage more attractive to the audience.
HTML needs to be practiced well. As there are many ways to edit a webpage using the image. As editing can be done as per the choice of the developers. It is a nice field to practice more.
So, hope you have liked this piece of article. Share your thoughts in the comments section and let us know if we can improve more.
Key Takeaways:
- To add images in HTML we can make use of the image tag and its various attributes.
- We can add images by specifying the path of the images in the form of URLs and also give each image a name using the alt attribute.ย
- The image sizes can be adjusted using height and width attributes and also by using the style attribute.
- We can also set an image as the background of our web page by using the background-image attribute.ย
