#11 HTML Images

picture is worth a thousand words. Images improve your website design.

Image tag syntax

We already seen the tag example in HTML Links tutorial.

<img> tag used to display images on web page. You just need to specify a path in src attribute to display image.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The <img> tag attributes:

  • src - Specifies the path to the image or link for external image (required)
  • alt - Specifies an alternate text for the image if the image is not loaded or the image is deleted from server
  • width - you can define the width of the image in pixels
  • height - you can define the height of the image in pixels

Example

See the Pen image tag by Arpit (@soniarpit) on CodePen.

<img> tag support many image extensions like .png, .jpg, .jpeg, .webp, .svg etc. Try it your self.

Hope you enjoyed. Happy coding :)

Previous: #10 HTML Links

Next: #12 HTML Tables