HTML Headings

Chapter 6

When we want to add a title, heading or sub-heading in a webpage or a section in a webpage, we use HTML Heading tags. Like we have a chapter title, heading or sub-heading in books.

We have total 6 HTML heading tags in HTML. Which are <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.

Browser attach default behavior to every HTML element. Similerly its attach a default font size to each heading and a default spacing (margin) before and after a heading. We can change default style using style tag or css.

<h1>...</h1> is most important heading and <h6>...</h6> is least important heading.

Level 1 Heading <h1>

Level 2 Heading <h2>

Level 3 Heading <h3>

Level 4 Heading <h4>

Level 5 Heading <h5>

Level 6 Heading <h6>

You can see in above example that <h1> heading has more font size and space and <h6> has least.

Why HTML Headings Tags are so important

Although, using css, we can change a look & feel of any html tag and make it look like a output of HTML Heading tags. But still HTML Headings Tags are so important becuase search engine like google, bing, yahoo etc. use heading to index the pages. In SEO, properly defined heading has a important role.

Always use heading tags <h1> for main heading, <h2> for next less important heading and so on. Never use heading tags for other then headings text.

HTML code for above HTML headings output.

<h1> Level 1 Heading &lt;h1&gt; </h1>
<h2> Level 2 Heading &lt;h2&gt; </h2>
<h3> Level 3 Heading &lt;h3&gt; </h3>
<h4> Level 4 Heading &lt;h4&gt; </h4>
<h5> Level 5 Heading &lt;h5&gt; </h5>
<h6> Level 6 Heading &lt;h6&gt; </h6>

Note: Above page you are reading is construct using few Heading tags, Paragraph tags and few other inline-tags. Which we will discuss in coming chapters Chapter 7 - HTML Paragraphs