How to put an image in HTML – the easy way
In this article we will see how to put an image in HTML and also good practices that we should follow with images in order to have a clean code.
What’s up programmer, okay? Let’s learn something new!
We have the possibility to add images in HTML to make our web pages more interesting
And there is a very easy way to do this, we have to insert a tag of our own for images: the img
Let’s check the code:
<img src="image.jpg" alt="Sobre a imagem">
Here in this tag we can see some different things: src and alt, which we call attributes
Where src stands for source or source, which is the path to the image, and it is this attribute that allows it to appear in the HTML
Remember that the image can be in a folder/directory, so we must put all the way to it in src
<img src="img/image.jpg" alt="Sobre a imagem">
In this example the image.jpg is inside the img directory
And the other alt attribute comes from alternative, ie an alternative to image
We should then summarize what the image contains, and this attribute is a good practice and a very important one
Because it adds accessibility, that is, blind people who access web pages know the content of the image by this attribute
In addition, screen readers (Google bots) are also guided by this attribute.
So it is very important that you describe the image through the alt attribute, in all images on your site
We learned in this post how to put an image in the HTML, through the img tag
We also dove into these two essential attributes: src and alt
The src is used to place the path of the image and alt its description
Hey, want to learn more about HTML? Click here!