Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set Heading alignment in HTML?
Headings are the titles or subtitles of the content that you want to display on the web page. Headings help us to get an idea of the content on the web page. Headings and subheadings represent the key concepts ideas and supporting ideas in the content of the web page. HTML has different levels of heading tags from <h1> to <h6>.
Heading alignment refers to the horizontal positioning of heading text within its container. In modern HTML, we align headings using the CSS text-align property with the style attribute, as the deprecated align attribute is no longer recommended.
Syntax
Following is the modern syntax for heading alignment using CSS −
<h1 style="text-align: left | right | center | justify;">Heading text</h1>
The deprecated HTML align attribute syntax (not recommended) −
<h1 align="left | right | center | justify">Heading text</h1>
Center Alignment
Center alignment places the heading text in the middle of its container. This is commonly used for titles and main headings.
Example
Following example demonstrates center alignment using the CSS text-align property −
<!DOCTYPE html> <html> <head> <title>Center Heading Alignment</title> </head> <body style="font-family: Arial, sans-serif;"> <h1 style="text-align: center;">TutorialsPoint</h1> <h2 style="text-align: center;">HTML Tutorial</h2> <p>This is a paragraph with normal alignment.</p> </body> </html>
The output shows both headings centered on the page −
TutorialsPoint
HTML Tutorial
This is a paragraph with normal alignment.
Left Alignment
Left alignment is the default alignment for headings in most browsers. The text starts from the left edge of the container.
Example
Following example demonstrates explicit left alignment −
<!DOCTYPE html> <html> <head> <title>Left Heading Alignment</title> </head> <body style="font-family: Arial, sans-serif;"> <h1 style="text-align: left;">TutorialsPoint</h1> <h3 style="text-align: left;">Learn Web Development</h3> <p>HTML, CSS, and JavaScript tutorials.</p> </body> </html>
The output shows headings aligned to the left −
TutorialsPoint Learn Web Development HTML, CSS, and JavaScript tutorials.
Right Alignment
Right alignment positions the heading text against the right edge of its container.
Example
Following example demonstrates right alignment for headings −
<!DOCTYPE html> <html> <head> <title>Right Heading Alignment</title> </head> <body style="font-family: Arial, sans-serif;"> <h1 style="text-align: right;">TutorialsPoint</h1> <h2 style="text-align: right;">Programming Tutorials</h2> <p>Learn programming languages and web technologies.</p> </body> </html>
The output shows headings aligned to the right −
TutorialsPoint
Programming Tutorials
Learn programming languages and web technologies.
Justify Alignment
Justify alignment stretches the text to fill the entire width of the container. However, for single-line headings, justify alignment typically has no visible effect since there's no text to stretch across multiple lines.
Example
Following example demonstrates justify alignment with a longer heading text −
<!DOCTYPE html>
<html>
<head>
<title>Justify Heading Alignment</title>
</head>
<body style="font-family: Arial, sans-serif;">
<h2 style="text-align: justify; width: 300px; border: 1px solid #ccc;">
This is a very long heading that spans multiple lines to demonstrate justify alignment
</h2>
<h3 style="text-align: justify;">Short Heading</h3>
<p style="text-align: justify; width: 300px;">
This paragraph demonstrates justify alignment where text stretches across the full width.
</p>
</body>
</html>
The justify alignment works when the heading spans multiple lines, but has no effect on single-line headings.
Using CSS Classes for Heading Alignment
Instead of inline styles, you can define CSS classes for better maintainability and reusability.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Classes for Alignment</title>
<style>
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1 class="text-center">Welcome to TutorialsPoint</h1>
<h2 class="text-left">HTML Tutorials</h2>
<h3 class="text-right">Advanced Topics</h3>
<p>Using CSS classes makes styling more maintainable.</p>
</body>
</html>
This approach provides better separation of content and styling, making the code easier to maintain and modify.
Browser Compatibility
The CSS text-align property is supported by all modern browsers. The deprecated HTML align attribute should be avoided as it may not work in newer browsers and violates current web standards. Always use CSS for styling and alignment.
| Method | Browser Support | Recommended |
|---|---|---|
| CSS text-align property | All modern browsers | Yes |
| HTML align attribute | Deprecated, limited support | No |
| CSS classes | All modern browsers | Yes (best practice) |
Conclusion
Heading alignment in HTML is best achieved using the CSS text-align property with values of left, center, right, or justify. The modern approach uses either inline styles with the style attribute or CSS classes for better maintainability. Avoid the deprecated HTML align attribute in favor of CSS-based solutions.
58K+ Views
