HTML foundations — images
This is a series of posts about Front-End topics, concepts and technologies. To check all the posts search for the hashtag “#journeyIntoFrontEnd”.
In this post, we gonna see how we can add images in an HTML file.

So far my page has text and titles, now is time to add some images and make the page more interesting.
The first thing to do is organizing the files in the directory, the idea is to create a folder for the images:

I like to use images from pexels, they have a lot of options and the images are free to use. Always remember to give credit for your images, you can do that including a legend under the photo with the source link:
via [source link]
The <img> tag
To include images we gonna use the <img> tag, this tag is self-closing so we won’t need to include a closing tag like we did before.
The image tag usually has an src, alt and width attributes:
<img src="./images/lemonade.jpg" alt="lemonade picture" width="400">The first attribute is the src, the path to your image. The path work as a physical address to your image file, because of this definition, is normal for some people try to use the entire file path:
<img src="iararibeiro/medium/journey-into-fronend/html-foundations/images/lemonade.jpg" alt="lemonade picture">Practically this is right, but the image will be loaded only when I open my HTML on my computer (localhost).
To avoid this problem we use relative paths.
Relative paths work like a short-generic-source-address, we will use an address and it will work everywhere.
This is how it works: the browser can access all the files that are in the same folder of your HTML, so we can tell the browser to look for a file some folders above or below the current directory.
If your image file is in the same directory of the .html file, we do:
<img src="image-name.jpg" alt="This is an amazing picture" width="400">If the image is in a folder inside the root directory, like this:

In this case, you will use the dot-slash to access the files inside the directory:
<img src="./folder-name/image-name.jpg" alt="This is an amazing picture" width="400">If the image is in a directory above your .html file:

In this case, you will use the double-dot-slash to access the files in the upper directory:
<img src="../folder-name/image-name.jpg" alt="This is an amazing picture" width="400">The alt attribute
This is an important attribute and I see so many people let this empty!
The alt attribute will be used when your image can’t be loaded or for accessibility, so this attribute should contain a small text description of your image:
<img src="./images/lemonade.jpg" alt="A photo of a glass of lemonade" width="400">The width attribute
As the name says, this attribute will determinate the size of your image.
The width, when set on the <img> tag is by default in pixels, so you don’t need to include “px”.
In this example it will be 400 pixels:
<img src="./images/lemonade.jpg" alt="A photo of a glass of lemonade" width="400">Remember, you will need to use CSS if you need to set your image using other units — like %, for example.
That’s it!
Now my page has images and is looking like this:

What is next?
In the next post, we gonna learn about the <div> tags and how to organize better our code.
You can find the code for this page on my Github.
Check the previous post: HTML foundations — Text.

