HTML Images

HTML allows add images to your website. Images can be in many formats (extensions of files) such as .jpg, .jpeg, .png, .gif, .svg.. If you are making website we recommend you to make new folder called images next to your HTML file and all images used in your website store in this folder.

<img src="path_to_image" alt="alternative_text">

As you can see above image needs two required attributes:

• src="path_to_image" - address to your image (link or path)
• alt="alternative_text" - alternative text is displayed when image cannot be loaded. It is required attribute by W3 standards and it also help people who are blind.

Width and height of image

You should set width and height of image because when image is bigger it can break your content for a while your page is loading. But it is not necessary.

<img src="/images/cat.jpg" alt="Cute kitties" width="300" height="250">

Width and height are in pixels. If you set just one (height or width) image will adjusts width and height automatically. You can also use CSS styles to change image width, height and other parameters and everything is explained in CSS course.

Image as a link

As we know from previous chapter that links can be used on any HTML element, so we can use links also on images. Please see example code below.

<a href="/link/to/page.html">
   <img src="/images/cat.jpg" alt="Cute kitty!">
</a>

By: Tomas Silny
Edited: 2020-11-07 20:10:11