HTML Headings Tags H1, H2, H3, H4, H5, H6
In this lesson, you will learn total six levels HTML headings tags, i.e. <h1> <h2> <h3> <h4> <h5> and <h6>. <h1> is the most important tag, while <h2> is the second important tag for an HTML document. The web browser automatically implements some elements to these tags, e.g. font size, line break, margin spaces, etc.
Example of HTML Headings Tags <h1> to <h6>
The following codes show the six different HTML headings. Write this code in a text editor such as notepad or Notepad ++. Save it as a filename.html and then visualize it in your browser, checking that you get the expected result.
<h1> A first level heading </h1> this is most important tag <h2> A second level heading </h2> second important tag <h3> A third level heading </h3> <h4> A fourth level heading </h4> <h5> A fifth level heading </h5> <h6> A sixth level heading </h6> least important tag
How to write HTML headings tags?
- Open a Notepad on your computer.
- Copy all the above code and paste it into the Notepad window.
- Save this file with an HTML extension, e.g. filename.html
- Now, double-click on this file to view the HTML document’s headings.
Attribute Supports:
The following attributes support heading HTML headings.
<h1 align="center"> heading 1 center </h1> <h2 align="left"> heading 2 left</h2> <h3 align="right"> heading 3, right </h3> <h4 align="justify"> heading 4 Justify</h4> <h5 align="center"> heading 5 center</h5> <h6 align="left"> heading 6, left</h6>
If the align attribute doesn’t work then you can use the CSS code instead.
Support CSS Codes:
<!DOCTYPE html> <html> <h1 style="text-align:center"> heading 1 center </h1> <h2 style="text-align:left"> heading 2 left </h2> <h3 style="text-align:right"> heading 3, right </h3> <h4 style="text-align:justify"> heading 4 Justify </h4> <h5 style="text-align:center"> heading 5 center </h5> <h6 style="text-align:left"> heading 6, left </h6> </body> </html>
Importance of HTML Headings Tags in SEO:
Heading Tags are highly recommended by search engines, like Google, Yahoo, etc. therefore, if you want to rank any keyword, then you must include it in the heading element, especially in <h1> and <h2> tags.
Keep in mind that on a page you could put a large text indicating it in another way, for example by modifying the font size without using a header. Why then use headers? The headers give special relevance to the text, and in fact search engines like google, yahoo or bing when they find a <h1> tag give more relevance than a text of the same size that is not a header.
It is therefore convenient to use the tags <h1>, <h2>, etc. to obtain a better positioning of web pages in the search engines. That is, using <h1> not only means enlarging the size of the text, it also means indicating that the text included between those labels is of greater importance than the rest of the text and this is valued by the search engines.
Of course, it will not do any good if you try to include all the text of your web page inside heading tags because search engines are not stupid, they will detect that “trick” and even penalize you by doing this. Therefore headings should be used with moderation and balance.
