How to add an image to an HTML page

What is HTML Image Element?

In HTML, <img> represents HTML image element. It is used to embed images in a webpage.

It allows to display graphics on a webpage by referencing the image source file using the src attribute.

Example of Embedding HTML Image

Create an HTML <img> element.

Add src attribute to the image element.

Specify the URL or source file path of the image in the src attribute. In this case, the address is "logoimage.jpg".

Add alt attribute to the image element. alt attribute provides alternative text for the image. This text is displayed if the image cannot be loaded. "xFactor School Logo" is added as alternative text.

Look at the following example:

Example of HTML Image Element


Output of the above example

Example of Image in a Webpage


xFactor School Logo

<img/> tag is used to add image in a page

src="logoimage.jpg" is source path of the image


Here is another example of image element with abosolute URL (the complete web address or path to a resource):

"https://xfactorschool.com/logoimage.jpg" is the absolute source path of the image


Output of the above example

Example of Image in a Webpage


xFactor School Logo

<img/> tag is used to add image in a page

"https://xfactorschool.com/logoimage.jpg" is the absolute source path of the image

Live Code Playground

In the following HTML code editor, you can practice the above code by creating more new image element. Click on the 'Run Code' button to render the code; the rendered page will be displayed in the following HTML Code Output frame. Practice until you become comfortable and proficient with your code.

HTML logo HTML Online Editor
HTML Code Output