Do you think IIT Guwahati certified course can help you in your career?
Introduction
The align tag in HTML is used to control the alignment of elements like text, images, and tables. It plays a significant role in web design, helping developers organize content visually for better readability and structure.
In this article, we will discuss the supported tags for alignment, their syntax, attribute values, examples, and browser compatibility.
Supported Tags
The align attribute is commonly used with the following HTML tags:
<p> (paragraph)
<img> (image)
<table> (table)
<div> (division or section)
<h1>, <h2>, <h3> (heading levels)
While newer versions of HTML (HTML5) have largely replaced the align attribute with CSS properties, understanding its usage remains valuable for working on legacy projects.
Syntax
The general syntax for using the align attribute is straightforward and consistent across tags:
<tag align="value">
Content goes here
</tag>
Attribute Values
The align attribute accepts different values depending on the tag it is applied to. Below are the most commonly used values:
left: Aligns content to the left.
right: Aligns content to the right.
center: Aligns content to the center.
justify: Aligns text to both the left and right margins (only for text-based tags like <p>).
Examples
Let’s explore how to use the align attribute with different tags.
Example 1: Aligning a Paragraph
Here’s how you can align text within a paragraph:
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Alignment</title>
</head>
<body>
<p align="left">This paragraph is aligned to the left.</p>
<p align="center">This paragraph is centered.</p>
<p align="right">This paragraph is aligned to the right.</p>
<p align="justify">This paragraph is justified to fit both left and right margins.</p>
</body>
</html>
Output:
The first paragraph aligns to the left.
The second is centered.
The third aligns to the right.
The fourth is justified.
Example 2: Aligning an Image
You can align images within a page using the align attribute:
<!DOCTYPE html>
<html>
<head>
<title>Image Alignment</title>
</head>
<body>
<img src="example.jpg" alt="Example Image" align="left">
<p>This text flows around the image aligned to the left.</p>
<img src="example.jpg" alt="Example Image" align="right">
<p>This text flows around the image aligned to the right.</p>
</body>
</html>
Output:
The first image is aligned to the left, with text wrapping around it.
The second image is aligned to the right, with text wrapping accordingly.
Example 3: Aligning a Table
The align attribute helps position tables within a page:
The table is centered on the page, with a border around it.
Supported Browsers
Most modern browsers like Google Chrome, Mozilla Firefox, Microsoft Edge, and Safari support the align attribute for backward compatibility. However, since it is deprecated in HTML5, it’s recommended to use CSS for alignment in new projects. For instance, you can achieve the same effect using:
p {
text-align: center;
}
Frequently Asked Questions
Why is the align attribute deprecated in HTML5?
The align attribute is deprecated in HTML5 because CSS provides more flexible and robust ways to handle alignment.
Can I still use the align attribute in modern browsers?
Yes, modern browsers still support the align attribute for backward compatibility, but it’s better to use CSS for new projects.
What is the alternative to the align attribute in HTML5?
The alternative is using CSS properties like text-align for text, float or margin for images, and margin or text-align for tables.
Conclusion
The align tag in HTML offers a simple way to control the alignment of various elements, making content more organized and visually appealing. Although it is deprecated in HTML5, understanding its usage is essential for maintaining or updating legacy projects. You can use this knowledge to align text, images, and tables effectively.
519+ registered 
