Understanding Image Attributes

When adding images to your website, there are a few key attributes you should know about to make sure they display correctly and provide useful information.

1. src: Source of the Image

The src attribute tells the browser where to find the image file. Think of it as the image's address. It's essential for the image to show up.

Example:

<img src="https://codersmile.com/codersmile.svg">

2. alt: Alternative Text

The alt attribute provides a text description of the image. This is important for accessibility (helping people who use screen readers) and also helps with SEO.

Example:

<img src="https://codersmile.com/codersmile.svg" alt="CoderSmile logo">

3. title: Tooltip Text

The title attribute gives extra information about the image. When someone hovers over the image, this text appears as a tooltip.

Example:

<img src="https://codersmile.com/codersmile.svg" alt="CoderSmile logo" title="Welcome to CoderSmile!">

4. width: Width of the Image

The width attribute sets how wide the image should be. You can use pixels or percentages.

Example:

<img src="https://codersmile.com/codersmile.svg" alt="CoderSmile logo" width="200">

5. height: Height of the Image

The height attribute sets how tall the image should be. Like width, it can be in pixels or percentages.

Example:

<img src="https://codersmile.com/codersmile.svg" alt="CoderSmile logo" width="200" height="100">

Putting it all together, here’s a complete example:

<img src="https://codersmile.com/codersmile.svg" alt="CoderSmile logo" title="Welcome to CoderSmile!" width="200" height="100">