🖼️ Align Attribute of `<img>` Tag

The align attribute in the <img> tag is used to specify the alignment of an image in relation to the surrounding text or page layout. Although it is deprecated in HTML5 (we now use CSS instead), it is still studied in CBSE for understanding how images are placed.

1. Horizontal Alignment

This controls whether the image appears on the left or right of the page, with text flowing around it.

align="left" → Image moves to the left, and text wraps on the right.
align="right" → Image moves to the right, and text wraps on the left.

Example:

<img src="car.jpg" alt="Car" align="left" width="150" />
<p>
  This is a car aligned to the left. Notice that the text flows on the right
  side of the image.
</p>

<img src="bike.jpg" alt="Bike" align="right" width="150" />
<p>This is a bike aligned to the right. The text flows on the left side.</p>

2. Vertical Alignment

This controls how the image is aligned vertically with text in the same line.

align="top" → Top of the image aligns with the top of the tallest text in the line.
align="middle" → Image is aligned to the middle of the text.
align="bottom" → Bottom of the image aligns with the baseline of text (default).

Example:

<p>
  This is <img src="pen.jpg" alt="Pen" align="top" width="40" /> aligned top.
  <br />
  This is <img src="pen.jpg" alt="Pen" align="middle" width="40" /> aligned
  middle. <br />
  This is <img src="pen.jpg" alt="Pen" align="bottom" width="40" /> aligned
  bottom.
</p>

🖼️ Floating Images in HTML

A floating image is an image that is placed on the left or right side of a webpage (or container) so that the text flows (wraps) around it.

It gives a magazine or newspaper-style layout, where pictures are on one side and the text continues beside them.

✅ How to Create Floating Images using `align` Attribute

In older HTML (before HTML5), we used the align attribute with values left or right.

align="left" → Image floats to the left, and the text flows on the right.
align="right" → Image floats to the right, and the text flows on the left.

📘 Example: Floating Image to the Left

<img src="car.jpg" alt="Car" align="left" width="150" />
<p>
  This is a red car. The image is floated to the left side, and the text flows
  on the right of the image. You can keep writing more content, and it will wrap
  around the image naturally.
</p>

🔹 Here, the car picture stays on the left, and the paragraph adjusts to flow around it.

📘 Example: Floating Image to the Right

<img src="bike.jpg" alt="Bike" align="right" width="150" />
<p>
  This is a bike. The image is floated to the right side, and the text flows on
  the left of the image. This is useful when you want to highlightmeaning of word heremeaning of word here images side
  by side with content.
</p>

🔹 Here, the bike picture stays on the right, and the text flows on the left.

🚨 Important Note

The align attribute is deprecated in HTML5.
Today, we use CSS float to create floating images:

CSS Example (Modern Way):

<img
  src="flower.jpg"
  alt="Flower"
  style="float:left; width:150px; margin-right:10px;"
/>
<p>
  This is a flower image floated using CSS. The text flows to the right of the
  image.
</p>

📘 Quick Recap Table

Value	Meaning
`left`	Aligns image to left, text flows on right.
`right`	Aligns image to right, text flows on left.
`top`	Aligns image with top of text line.
`middle`	Aligns image with middle of text line.
`bottom`	Aligns image with baseline of text line (default).

🚨 Note

The align attribute is not supported in HTML5.

Instead, we use CSS:

<img src="flower.jpg" style="float:left; width:150px;" />
<img src="flower.jpg" style="float:right; width:150px;" />
<img src="flower.jpg" style="display:block; margin:auto; width:150px;" />

✨ Exam Point

The align attribute of the <img> tag is used to set the alignment of an image either horizontally (left, right) or vertically (top, middle, bottom) with respect to text. However, in HTML5 this attribute is deprecated and CSS is used instead.

Floating images are images aligned to the left or right of a webpage so that text flows around them. They can be created using the align="left" or align="right" attribute in <img>, although in modern HTML CSS float is used instead.

🖼️ Align Attribute of <img> Tag