If you want to include links on your website, you can use the HTML attribute target to specify where the link should open. In doing so, you decide whether users should stay on your online presence or be sent on to the next website. In our article, you will learn how to use _target and what you should keep in mind when doing so.How to define link targets with _target in HTML
The img tag allows you to easily add images to your website. It supports numerous formats and a variety of attributes can enhance the img tag in HTML even further.
SSL certificates from IONOS
Protect your domain and gain visitors' trust with an SSL-encrypted website!
What is the img tag needed for?
The HTML tag “img” inserts images and graphics into websites. The img tag functions as a placeholder, whereby the stored src attribute links to the actual storage location of the graphic when a website is accessed. The image is then embedded into the website. An alt attribute is required in addition to the src attribute. This will store an alternative text in case the image cannot be displayed. JPEG, GIF, PNG, and several others are supported by the img tag in HTML.
What is the img tag syntax?
The img tag syntax is straightforward and only requires a few components. The simplest variant is:
<img src="redcar.png" alt="small red car at a traffic light">
To ensure the graphic is displayed correctly, it is a good idea to include the image’s height and width on the website when using the img tag. These settings can be found in HTML attributeswidth and height. The code should look like this:
<img src="redcar.png" width="500" height="200" alt="small red car at a traffic light">
The loading attribute is also recommended when using the img tag in HTML. This ensures that the corresponding graphic is only loaded when users scroll to the corresponding position. Set the value of the loading attribute to lazy for this feature. This is how it should look in code:
<img src="redcar.png" width="500" height="200" alt="small red car at a traffic light" loading="lazy">
Which attributes can be used in the img tag in HTML?
In addition to the width, height, and loading attributes, there are several other attributes which are supported by the img tag in HTML. These include all global, event, and other specific attributes. Below is an overview of the attributes which can be used with the img tag:
Mandatory; specifies an alternative text for the image.
Specifies which third-party websites can access the corresponding image with a script.
auto, sync, async
Defines how and whether an image can be decoded.
Pixel or percent
Sets the image’s height on the website.
Controls image’s access to a server-side image map.
car, eager, lazy
Determines when an image should load.
no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url
States whether the image comes from an unsafe source.
Defines image sizes for different page layouts.
Mandatory; specifies the image’s URI address.
Stores a list of images for different purposes, e.g. different devices and sizes.
Links the element to a specific image map.
Pixel or percent
Specifies the image’s width.
The Website Builder from IONOS is the ideal tool to design an individual and professional website. It allows you to cultivate your online presence with your ideas in mind — without much prior knowledge. Our experienced experts will also be happy to help you if you would prefer to leave this task to the professionals.