In this tutorial we will show you how to align heading in HTML, in HTML, we all know that to make headings in HTML we use heading tags that may be one from h1, h2, h3, h4, h5 and h6 these and sometimes we get some problem like that how we able to align heading tag in html.
So, that the sequence that we want to maintain in our website does not break.
As to give the solution of this problem, we are here to show you how to align heading tags in html
Step By Step Guide On How To Align Heading In HTML :-
As, there are six types of headings in html and they are all different. So, there representation is also different. They are h1, h2, h3, h4, h5 and h6.
All are paired tags and the property that we use today, can be applied to any from them. We all know that there are four alignments in html that are left, right, center and justify.
So, we are able to align these headings in only four positions. This can be done with the help of style attribute. Now, in next example we show you that how you able to align headings in html.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
</head>
<body>
<h1 style=”text-align:center”>
This is first heading.
</h1>
<h2 style=”text-align:justify”>
This is second heading.
</h2>
<h3 style=”text-align:right”>
This is third heading.
</h3>
<h4 style=”text-align:left”>
This is fourth heading.
</h4>
<h5 style=”text-align:center”>
This is fifth heading.
</h5>
<h6 style=”text-align:right”>
This is sixth heading.
</h6>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. In the body tag, we create six heading tags and as we know they all are different.
- So, we create six different heading tags with sequence h1, h2, h3, h4, h5 and h6. All are paired tags this is the reason we create there closing tags. Now, to align these we give different properties to different headings.
- First we create style attribute and in this we use text-align property, now in this property you are able to give the value like left/ right/ center / justify. But at one time you can use only one from them.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, hence we can say here that we are now able to align any heading in any position by using text-align property.
There is also a method without using style attribute, and we will show you that in our next sessions.
I hope this tutorial on how to align heading in HTML helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
