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

Conclusion

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!