The align attribute in the HTML <p> tag is used to control the alignment of paragraph text. It allows you to align text to the left, center, or right of its container. This attribute helps in adjusting the text layout for better presentation and readability.
Syntax:
<p align="left | right | center | justify">
- left: Aligns the text to the left of the paragraph (default alignment).
- right: Aligns the text to the right of the paragraph.
- center: Centers the text in the middle of the paragraph.
- justify: Stretches the text so that it aligns evenly on both the left and right sides of the paragraph.
However, the align attribute for the <p> tag is deprecated in HTML5. Today, developers are encouraged to use CSS for text alignment to ensure proper styling and compatibility across modern web browsers.
Example 1: Aligning Paragraph Text to the Left (Deprecated)
In this example, we will see the implementation of the <p> align Attribute with an example.
index.html
<html>
<head>
<title>
HTML p align Attribute
</title>
</head>
<style>
body {
font-size: 25px;
}
</style>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2 style="color: crimson;">
HTML p align Attribute
</h2>
<p align="left">
Left align content
</p>
<p align="center">
center align content
</p>
<p align="right">
Right align content
</p>
</body>
</html>
Output:
HTML <p> align AttributeIn this example:
- The code consists of <head>, <style>, and <body> sections.
- The title of the page is set to "HTML p align Attribute" (<title> tag).
- Font size of all text in the body is set to 25px using the <style> tag.
- <h1> (green text) and <h2> (crimson text) display the main title and subtitle.
- p align="left">: Aligns the paragraph text to the left.
- <p align="center">: Centers the paragraph text.
- <p align="right">: Aligns the paragraph text to the right.
Example 2: Aligning Paragraph Text to the Right (Deprecated)
In this example, we will see the implementation of <p> align tag justify with an example.
index.html
<html>
<head>
<title>
HTML p align Attribute
</title>
</head>
<style>
body {
font-size: 25px;
}
</style>
<body>
<h1>
<p align="justify" style="color: green;">
GeeksforGeeks
</p>
</h1>
<h2 style="color: crimson;">
HTML p align Attribute
</h2>
<p align="left">
Left align content
</p>
<p align="center">
center align content
</p>
<p align="right">
Right align content
</p>
</body>
</html>
Output:
HTML <p> align AttributeIn this example:
- The code defines a basic HTML page with a title, headings, and paragraphs.
- <head>: Contains metadata like the title of the webpage.
- <style>: Defines the CSS for styling the content.
- align="justify": The text is aligned to both the left and right margins, spreading out evenly.
- align="left": Aligns text to the left.
- align="center": Centers the text.
- align="right": Aligns the text to the right.
Why Is the align Attribute Not the Best Option?
While the align attribute works, it's no longer the best way to control content alignment in modern HTML. Here’s why:
- HTML is for Structure, CSS is for Style: HTML is used to structure your content, while CSS (Cascading Style Sheets) is used for styling. Mixing the two can make code harder to maintain in the long run.
- Limited Control: The align attribute only gives three alignment options (left, center, right). But with CSS can control not only horizontal alignment but also vertical alignment, spacing, and more.
- HTML5 Doesn’t Recommend It: In HTML5, the align attribute is considered outdated for most elements, including <td>. Instead, we are encouraged to use CSS for styling and layout purposes.
Note : HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
Conclusion
The align attribute in the HTML <p> tag provides basic text alignment options like left, center, right, and justify. However, it is now considered deprecated in HTML5, as CSS offers more flexibility and control over text alignment and layout.
Explore
HTML Basics
Structure & Elements
Lists
Visuals & Media
Layouts & Designs
Projects & Advanced Topics
Tutorial References