How to Insert an Image in HTML Page?


Images make content more interesting by helping readers understand the content better on the web page.

We can insert images into the HTML page. To insert image in an HTML page, use the <img> tags. It is an empty tag, containing only attributes since the closing tag is not required.

We should use the <img> tag inside <body>…</body> tag. The <img> tag specifies an image to be displayed in an HTML document.

The src attribute is used to add the image source which is the URL of the image(location of the file).

The alt attribute is for adding alternate text, width is for adding width, and height is for adding the height of the image.

Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the image.

The <img> tag has two attributes −

  • src − Specifies the path to the image(location of the file)

  • alt − Specifies an alternate text for the image

Syntax

Following is the syntax to insert an image in an HTML page.

<img src="url" alt="alternatetext">

Example

Following is the example program to add an image to an HTML page.

<!DOCTYPE html> <html> <body> <h2>HTML Article on Inserting image to the web page</h2> <img src="https://www.tutorialspoint.com/javafx/images/javafx-mini-logo.jpg"> </body> </html>

Now let’s see how the alt attribute (alternate text) works if the user for some reason cannot view, it because of slow connection, or an error in the src attribute. Then the value of the alt attribute describes the image property.

Example

In the following example program, we will specify an incorrect path for the image to be inserted in an HTML page and see how the alt attribute works.

<!DOCTYPE html> <html> <body> <h2>HTML Article on Inserting image to the web page</h2> <img src="https://www.tutorialspoint.com/opencv/images/opencv-mini-logo.jpg" alt="search engine image" > </body> </html>

The text "search engine image" is the alternate text for the image when there occurs some problem to view the image.

Example: Changing the size of an image

We can also use style attribute to make changes in the size of the image that is height and width of the image. Following is the example program to make changes in the size of the image.

<!DOCTYPE html> <html> <body> <h2>HTML Article on Inserting image to the web page</h2> <img src="https://www.tutorialspoint.com/opencv/images/opencv-mini-logo.jpg" height="50px" width="50px"> </body> </html>

Updated on: 31-Aug-2023

87K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements