YouTip

# HTML `` align Attribute The `align` attribute of the `` tag was historically used to control the alignment of an image relative to its surrounding inline text and elements. --- ## Deprecation Notice > ⚠️ **Important:** The `align` attribute is **deprecated** in HTML 4.01 and is **not supported** in HTML5. Modern web development practices require using **CSS** (Cascading Style Sheets) to handle layout and alignment. > > Refer to the (#modern-css-alternatives) section below to learn how to align images using modern standards. --- ## Browser Support The `align` attribute is supported by all major legacy and modern browsers for backwards compatibility: * Google Chrome * Mozilla Firefox * Microsoft Edge / Internet Explorer * Safari * Opera --- ## Definition and Usage The `` element is an inline element, meaning it does not start on a new line and can sit directly alongside text. The `align` attribute specifies how the image should align vertically or horizontally relative to the surrounding text flow. ### Syntax ```html ``` ### Attribute Values | Value | Description | | :--- | :--- | | `left` | Aligns the image to the left margin. Surrounding text wraps around the right side of the image. | | `right` | Aligns the image to the right margin. Surrounding text wraps around the left side of the image. | | `middle` | Aligns the vertical center of the image with the baseline of the surrounding text. | | `top` | Aligns the top of the image with the top of the tallest element on the current line. | | `bottom` | Aligns the bottom of the image with the baseline of the surrounding text (this is the default behavior). | --- ## Code Examples ### Legacy HTML `align` Example The following example demonstrates how the `align="middle"` attribute aligns an image inline with text: ```html

This is some text. This is some text.

``` --- ## Modern CSS Alternatives Instead of using the deprecated `align` attribute, you should use CSS properties such as `float` and `vertical-align` to achieve the same layouts with cleaner, standards-compliant code. ### 1. Replacing Horizontal Alignment (`left` / `right`) To align an image to the left or right and let text wrap around it, use the CSS `float` property. #### CSS Float Left (Replaces `align="left"`) ```html

This text will wrap around the right side of the image.

``` #### CSS Float Right (Replaces `align="right"`) ```html

This text will wrap around the left side of the image.

``` --- ### 2. Replacing Vertical Alignment (`top` / `middle` / `bottom`) To align an image vertically relative to its line of text, use the CSS `vertical-align` property. ```html

Text aligned with the top.

Text aligned with the middle.

Text aligned with the bottom.

```