Understanding the Basics: Images in HTML

Let's consider a scenario. Imagine you're creating a photo album, but instead of physical pictures, you're using digital images. And instead of a traditional album, you're placing these images on a webpage. How would you do that? The answer is HTML, or Hyper Text Markup Language. In simple terms, HTML is the language that tells a web browser how to structure the content on web pages.

In this blog, we'll explore how to add images to your web pages using HTML. Adding images can make your web pages more engaging and visually attractive, enhancing the overall user experience.

The Image Element: <img>

The primary HTML element used for embedding images on web pages is the <img> element. Think of the <img> element as the digital equivalent of a photo frame, holding your image in place on the webpage.

Here's a basic example of how to use the <img> element:

<img src="my-image.jpg">

In this example, my-image.jpg is the image file you want to display. The src attribute tells the web browser where to find the image file.

Understanding the src Attribute

You can think of the src attribute as an address that directs the browser to the image's location. This could be a location on your own website (a relative path) or on another website (an absolute URL).

For an image located in the same directory as your HTML file, you would use:

<img src="my-image.jpg">

If the image is located in a directory called 'images' that is in the same directory as your HTML file, you would use:

<img src="images/my-image.jpg">

And if the image is located on another website, you would use the full URL of the image:

<img src="https://example.com/images/my-image.jpg">

Using the alt Attribute

While the src attribute is essential, there is another attribute that, while not mandatory, is highly recommended: the alt attribute. The alt attribute provides alternative text for an image.

Imagine if the photo frame (the <img> element) is empty because the photo (the image file) couldn't be found. The alt attribute provides a description of the image that can be displayed in place of the missing image. It's also read by screen readers to provide context to visually-impaired users.

Here's how you use the alt attribute:

<img src="my-image.jpg" alt="A description of the image">

Adjusting Image Size

Sometimes, the original size of your image might not fit well with your webpage design. HTML provides two attributes to adjust the size of your images: width and height. You can specify the width and height in pixels.

Here's an example:

<img src="my-image.jpg" alt="A description of the image" width="500" height="600">

This will resize the image to be 500 pixels wide and 600 pixels high.

Remember, maintaining the aspect ratio of the image (the ratio between the width and height) is crucial to prevent the image from looking distorted.

Wrapping Up

Adding images to your webpages using HTML is like adding pictures to a digital photo album. By using the <img> element and understanding the src, alt, width, and height attributes, you can effectively control how images appear on your web pages. This enhances the visual appeal and usability of your website, making it more engaging for your audience.

Remember, practice makes perfect. So, go ahead and start adding images to your web pages!