- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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>
91K+ Views
