HTML headings – h1, h2.. to h6 headings and SEO

HTML headings – h1, h2.. to h6 headings and SEO

HTML Headings

There are a few ways to present the headings in the HTML documents. One of the ways is to use HTML <h1>, <h2> to <h6> tags to use headings in your web page. You can also customize headings by using CSS style in the <p>, <span> or div tags, however, the “headings” should be presented by using <h1> to <h6> tags of HTML.

This is also recommended for SEO (Search Engine Optimization) purpose to use heading tags in your web pages. The reason is, search engines take this as an important piece of content in the web page that contributes in the keyword rankings.

Generally, you should use one or two <h1>, and a few <h2> headings in your web pages. If you got quite a big page, say around 2000+ words web page then you may think to use more <h3> to <h6> headings.

Note that, the most important heading should be used in the <h1> tag and least should be in the <h6> tag.

Examples of using heading tags of HTML

The example shows how to use <h1> to <h6> tags of HTML. By default, the headings are bold as shown in the example below.

HTML headings

Experience this online

h1 with CSS example

You can also apply CSS to heading tags e.g. to make the text bigger or smaller, setting the color, font family, border, background etc.

The example below applies different CSS properties to h1 tag.

Experience this online

Also see HTML link | HTML table