How to center a header in HTML

In this article, we will see about how to center a header in HTML and CSS.

What is a header?

The header is the heading text of a webpage. In HTML we can use the <h1>-<h6> tag to create heading text but a webpage should have only one h1 tag because the h1 tag is the main heading text. We can use the h2 tag as many times as we want but all of them should be subheadings of the h1 tag.

How to center h1 tag

There are two ways to center heading tags, we can use HTML or CSS property to center a heading text easily.

CSS Method:

<html>
<head>
<title>centered heading</title>
</head>
<body>
<h1 style="text-align: center;">This is H1 Text</h1>

</body>
</html>

Output:

In the above code, we have first written the general syntax of HTML, and the title is set to be “centered heading”.
Then inside the body section, we have an h1 tag with some text.
In the style attribute, you should use the text-align property and give value as “center”.

HTML Method:

<!DOCTYPE html>
<html>
<head>
   <title>HTML METHOD</title>
</head>
<body>
   <center>
<h1>This is H1 Text</h1>
<h2>This is H2 Text</h2>
<h3>This is H3 Text</h3>
<h4>This is H4 Text</h4>
<h5>This is H5 Text</h5>
<h6>This is H6 Text</h6>
</center>
</body>
</html>

Output:

Steps:

You can center all HTML elements inside it using the <center> tag.
In the above code, we have h1 to h6 tags within the center tag, So the heading text is displayed in center.

Conclusion:

You can use both two methods to center a header or header text.