To insert an image into the HTML document, you can use the tag <image>. This HTML tag has 2 key attributes:

  • src — defines the path to the image file
  • alt — sets the alternative text. This text will be displayed on the page if the image is inaccessible, and the browser fails to display it.

How to use a local image

If the image that you’d like to show is on the same server as your HTML document, then you can specify the relative path.

<img src='/images/my_cool_image.jpg' alt='My Cool Image!'>

How to insert an HTML image using the URL

More often, the image is located on a remote server. If that’s the case, you should specify the whole path to it in the src attribute.

<img src='https://learn.coderslang.com/js-test-3.png' alt='JavaScript Interview Question #3'>

How to change the height and width of an image in HTML

Everything that’s related to styling the image could be done with CSS. For example, if you want to stretch the image to the full width of the page (or a parent container), you can do this:

img {
  width: 100%;
}

This approach, however, affects all images in your HTML document.

If you need to change the size of a single image, you can add the id attribute to it.

<img id=test src='https://learn.coderslang.com/js-test-3.png' alt='JavaScript Interview Question #3'>

Then create a CSS selector using this id attribute.

#test {
  width: 100%;
}

Using attributes width and height

Apart from CSS, you can change the size of an HTML image by adding the attributes width and height to the <image> tag.

<img src='https://learn.coderslang.com/js-test-3.png' alt='JavaScript Interview Question #3' width=600 height=400>

This approach is less flexible than CSS.

Read more CSS tutorials or Learn Full-Stack JS from scratch!