HTML Images | Introduction to Displaying Images in HTML
Images are a great way to add visual appeal to your web pages. You can use images to illustrate concepts, add visual interest to your content, and provide additional information to your users.
In this tutorial, you will learn how to add images to your web pages using HTML.
The <img>
Tag
To add an image to your web page, you use the <img>
tag. The <img>
tag is an empty tag, which means that it does not have a closing tag. and use the src
attribute to specify the URL of the image file that you want to display on the page.
As an example:
Editor
In this example:
- The
src
attribute specifies the source file of the image, which is URL in this case. - The
alt
attribute provides alternative text for the image, which is displayed if the image cannot be loaded or if the user is using a screen reader.
Width & Height
You can also include additional attributes in the <img>
tag to customize the image display, such as the width
and height
attributes to set the dimensions of the image.
As an example:
Editor
In this example:
- The
width
attribute is set to400
pixels and theheight
attribute is set to300
pixels.
Styling in Images
You can use the style attribute to add CSS styling to an <img>
tag to customize its appearance.
As an example:
Editor
In this example:
- The
style
attribute is used to add aborder
and padding to the image. - The border property adds a
1-pixel
solid
black
border around the image, while thepadding
property adds10
pixels of padding inside the border.
You can also use the style
attribute to set the dimensions of the image by using the width
and height
properties.
As an example:
<img src="image.jpg" alt="Example" style="width: 400px; height: 300px;" />
In this example:
- The
style
attribute is used to set thewidth
of the image to400
pixels and theheight
to 300 pixels.
Images in Local Folder
To include an image in your HTML file that is saved in a local folder on your computer, you can use a relative file path in the src attribute of the <img>
tag.
As an example:
<img src="images/example.jpg" alt="Example Image" />
In this example:,
- The image file
"example.jpg"
is saved in a folder named"images"
that is located in the same directory as the HTML file. - The
src
attribute specifies the relative file path to the image file.
Make sure that the file path and file name in the src
attribute are correct and match the name and location of the image file on your computer. If the image file is located in a different folder than the HTML file, you will need to adjust the relative file path accordingly.