HTML Images Tutorial

HTML images are important in making websites look good and sharing information.

Adding Images to HTML

To display an image in HTML, use the <img> (image) element. 

<img src="image.jpg" alt="Description of the image">
  1. <img>: The image element.
  2. src: Specifies the image file's source (URL or local path).
  3. alt: Provides alternative text for the image for accessibility and in case the image can't be displayed. (Network Error, Wrong File Path, or etc.)
Images in HTML5

Now, on purpose, I provided the wrong file path, so I'll get something like this.

alt tag in html 5

Image Types and Formats

  1. Common image formats used on the web include JPEG, PNG, GIF, and SVG.
  2. Choose the format that best suits your needs based on factors like quality, file size, and transparency.

Image Attributes

  1. width and height: Set the image dimensions.
  2. title: Adds a tooltip when the user hovers over the image.
  3. style: Apply inline CSS styles.
  4. class and id: Use for CSS or JavaScript targeting.
  5. border: Adds a border (not recommended; use CSS for styling).

Image Caption

  1. You can add captions to images by wrapping them in a <figure> and <figcaption></figcaption>
<figure>
    <img src="image.jpg" alt="Do Meditaion">
    <figcaption>Do Meditaion</figcaption>
</figure>
Do Meditaion
Do Meditaion