Scribd
Upload
2 views5 pages

Image in HTML

The HTML <img> tag is used to display images on web pages, enhancing their visual appeal and informational content. It is an empty tag that requires 'src' and 'alt' attributes, with additional optional attributes for styling and alignment. Images can be sourced locally or externally, and the 'alt' attribute is crucial for accessibility, providing descriptions for visually impaired users.

Uploaded by

vnanthakumar26it
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
2 views5 pages

Image in HTML

The HTML <img> tag is used to display images on web pages, enhancing their visual appeal and informational content. It is an empty tag that requires 'src' and 'alt' attributes, with additional optional attributes for styling and alignment. Images can be sourced locally or externally, and the 'alt' attribute is crucial for accessibility, providing descriptions for visually impaired users.

Uploaded by

vnanthakumar26it
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1/ 5

HTML Image

HTML img tag is used to display image on the web page. Images can
improve the design and the appearance of a web page.
Using images in HTML is a fundamental aspect of web development, allowing you to
enhance the visual appeal and informational content of your web pages.
Images can be anything from photographs and illustrations to logos and icons.
HTML img tag is an empty tag that contains attributes only, closing
tags are not used in HTML image element.

HTML Images Syntax


The HTML <img> tag is used to embed an image in a web page.

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

The <img> tag is empty, it contains attributes only, and does not have a
closing tag.

The <img> tag has two required attributes:

 src - Specifies the path to the image


 alt - Specifies an alternate text for the image

1. Image Tag (`<img>`):

The `<img>` tag has several attributes that control various aspects of how the image is
displayed:

- `src`: Specifies the source URL or path of the image file. This attribute is required.

- `alt`: Provides alternative text for the image, which is displayed if the image cannot
be loaded or for accessibility purposes.

- `title`: Provides additional information about the image when the user hovers over it.

- `width` and `height`: Sets the dimensions of the image. It's recommended to use
these attributes to prevent layout shifts when images load.

- `align`: Specifies how the image aligns with the surrounding content. However, this
attribute is no longer supported in HTML5, and CSS should be used for alignment.

- `style`: Allows inline CSS styling to control image appearance.

2. Image Sources:

Images can be sourced from various locations, including:

- Local: Images stored on your server or computer.


- External: Images hosted on other websites.

- Data URLs: Embedding images directly into HTML using base64-encoded data.

3. Common Image Format: Here is the commonly used image file format
that is supported by all the browsers.

Abbreviatio
S.No. n File Type Extension

1. PNG Portable Network Graphics. .png

Joint Photographic Expert Group .jpg, .jpeg, .jfif, .pjpeg, .p


2. JPEG.
image. jp

3. SVG Scalable Vector Graphics. .svg.

4. GIF Graphics Interchange Format. .gif

5. ICO Microsoft Icon. .ico, .cur

Animated Portable Network


6. APNG .apng
Graphics.

4. Alt Text and Accessibility:

The `alt` attribute in the `<img>` tag is crucial for accessibility. Screen readers use the alt
text to describe the image to visually impaired users.

5. Image Placement and Styling:

Images can be placed within various HTML elements, including paragraphs, headings, lists,
and more. You can use CSS to control the styling and layout of images, such as margins,
borders, shadows, and responsiveness.

Let's see an example of HTML image.

<!DOCTYPE>
<html>
<body>
<h2>HTML Image Example</h2>
<img src="good-morning.jpg" alt="Good Morning Friends"/>
</body>
</html>

Output:

HTML Image Example

Use of height and width attribute with img tag


You have learnt about how to insert an image in your web page, now if we
want to give some height and width to display image according to our
requirement, then we can set it with height and width attributes of image.

Example:
<!DOCTYPE html>

<html>

<head>

<title>Image tag</title>

</head>

<body>

<h2>HTML image example with height and width</h2>

<img src="https://static.javatpoint.com/htmlpages/images/animal.jpg"
height="180" width="300" alt="animal image">

</body>

</html>

Output:
HTML image example with height and width

Use of alt attribute


We can use alt attribute with tag. It will display an alternative text
in case if image cannot be displayed on browser. Following is the example
for alt attribute:

1. <img src="animal.png" height="180" width="300" alt="animal image">

How to get image from another directory/folder?


To insert an image in your web, that image must be present in your same
folder where you have put the HTML file. But if in some case image is
available in some other directory then you can access the image like this:

1. <img src="E:/images/animal.png" height="180" width="300" alt="animal image


">

In above statement we have put image in local disk E------>images


folder------>animal.png.

Use <img> tag as a link


We can also link an image with other page or we can use an image as a
link. To do this, put <img> tag inside the <a> tag.

Example:
<!DOCTYPE html>

<html>

<head>

<title>Image tag</title>

</head>

<body>
<h2>Use image as a link</h2>

<p>Click on the image to know about robotics</p>

<a href="https://www.javatpoint.com/what-is-robotics"><img
src="https://static.javatpoint.com/htmlpages/images/robot.jpg"
height="100" width="100"></a>

</body>

</html>

Output:

Use image as a link

Click on the image to know about robotics

Using images using css:

<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<img src="html5.gif" alt="HTML5


Icon" style="width:128px;height:128px;">

</body>
</html>

You might also like