HTML Images

Images can enhance a web page's design and appearance.

Certainly! An HTML image is typically displayed using the <img> (image) element. Here's an explanation of the basic structure and attributes related to HTML images.

Basic Structure

Example

<img src="img-house.jpg" alt="house">

You can click on above box to edit the code and run again.

Output

HTML Images Syntax

The syntax for including images in HTML using the <img> (image) element is as follows: The HTML 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 tag creates a holding space for the referenced image.

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

The tag has two required attributes:

src - Specifies the path to the image
alt - Specifies an alternate text for the image

Example

              
<img src="image-source" alt="alternative-text">

You can click on above box to edit the code and run again.

Here's an explanation of each part of the syntax:

<img>: This is the opening tag of the image element.

src="image-source": The src attribute specifies the source of the image. It can be a URL (web address) or a file path pointing to the location of the image on your server or device.

alt="alternative-text": The alt attribute provides alternative text for the image. This text is displayed if the image cannot be loaded or for accessibility purposes, helping users with visual impairments understand the content of the image.

In this example:

The image source is "example.jpg."
The alternative text is set to "Example Image."

You can also include additional attributes to control the appearance and behavior of the image. Here are a few examples:

width and height: Specify the width and height of the image in pixels.

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

These attributes enhance the presentation, accessibility, and user experience of images on your web page.

Image as a Link

To use an image as a link, put the <img> tag inside the <a> tag:

Example

              
<a href="https://codelines.in/tutorials/">
<img src="example.jpg" alt="example.jpg" width="30px;" height="20px;" >
</a>

You can click on above box to edit the code and run again.

Output

Image Floating

Use the CSS float property to let the image float to the right or to the left of a text:

Example

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the left of the text.</p>

You can click on above box to edit the code and run again.

Output

Smiley face A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.

Float the image to the left:

Smiley face A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.

The alt Attribute

The required alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

Example

              
<img src="./Images/img-house.jpg" alt="house image">

You can click on above box to edit the code and run again.

Output

The src Attribute

The required src attribute specifies the path (URL) to the image.

Example

              
<img src="./Images/img-girl.jpg" alt="Girl in Chania">

You can click on above box to edit the code and run again.

Output