Internet Stack.
HTML Basics

Images are an important part of HTML, allowing for visual content to be displayed on webpages.

Images are an important part of any website. They can help to make a website look more attractive, and they can also help to convey information.

In this guide, we’ll look at how to use HTML to add images to your website, as well as some best practices and things to learn.

Getting Started

To add an image to your website, you’ll need to use the HTML <img> tag.

This tag requires two attributes: src and alt. The src attribute is used to specify the source of the image, and the alt attribute is used to provide a text alternative for the image.

How To

To add an image to your website, you’ll need to use the following code:

<img src="image-url" alt="image-description">

Replace image-url with the URL of the image you want to use, and replace image-description with a brief description of the image.

This description should be concise and descriptive, as it will be used by screen readers and search engines.

Best Practices

When adding images to your website, there are a few best practices to keep in mind:

  • Optimise your images for the web. This means compressing them to reduce their file size, and using the correct file format (e.g. JPEG for photographs, PNG for graphics).
  • Use descriptive filenames for your images. This will help search engines to understand what the image is about.
  • Add the alt attribute to all images. This will help screen readers to understand what the image is about.
  • Add the title attribute to images that link to other pages. This will help users to understand where the link will take them.

Examples

Here are some examples of how to use the <img> tag:

<img src="logo.jpg" alt="Company logo">
<img src="photo.jpg" alt="Photo of a beach">
<img src="icon.png" alt="Search icon">

Upload file