HTML Images

You can import images to your HTML document by using the <img> tag.

  Do It Yourself

HTML Images are defined using the <img> tag.
The src attribute in the Image tag defines the source(URL) of the image.

<img scr="path" />

Sizing The Image

The height and width attributes are used to specify the height and width of the HTML image.

<img scr="path" height="50" width="50" />

The Image Alt

The alt attribute is used on images to define alternative texts to an image. Alternative texts only show when an image is not loaded. The alt attribute is also useful for better website accessibility for the visually impaired visitors using screen readers, as screen readers read its value to describe the image.

<img scr="https://cdn.lyty.dev/site-images/vase-hibiscus-flower.jpg" alt="Hibiscus flower in a green vase" />

Using Image As a Link

HTML Images can also be used as a link to other pages or different sections. To use an image as a link, wrap the <img> elements with the <a> tag.

What You Should Know at the End of This Lesson

• You should know how to place an image into an HTML document.
• You should know how to specify the width and height.
• You should know how to use an image as a link.