HTML Heading Tags

In this lesson we will discuss about the fundamental tags of the HTML language. As you are already familiar with the basic syntax of HTML which is really easy to understand. So, let’s start learning HTML heading tags using step by step guide and easy to understand "Try it yourself" examples.

Today our main focus will be on the HTML heading tags that plays a vital role in structuring your website's content and is extremely necessary according to the SEO (Search Engine Optimization) point of view which we will be discussing soon as we will proceed to the next level of our learning.

What is HTML heading?

There are six (6) HTML heading tags starting from <h1> to <h6>. Where <h1> is used to describe the most important heading while <h6> be the least important. To easily remember this just keep in mind that HTML heading tags numbering is in descending order (which means greater to smaller).

So we have concluded that if we use <h1> tag then it means our heading is bigger than all other heading tags like demonstrated in the example below.

<h1>Example of heading 1</h1>
<h2>Example of heading 2</h2>
<h3>Example of heading 3</h3>
<h4>Example of heading 4</h4>
<h5>Example of heading 5</h5>
<h6>Example of heading 6</h6>

This is the simplest example for learning how the HTML heading tags work. You can use them as you like but remember the hierarchy because most of the website visitors just go through the article's headings to get an overview about it. So, to provide a great user experience to your visitors you must maintain a well-structured headings in your article or blog post.

Importance of HTML heading tags

As majority of people search their queries online using the Search Engines like Google, Bing etc. That’s why heading plays a vital role in the indexing of your website because most search engines identifies the content of web page using its heading. So, if you wisely use the heading tags in your content than it is highly possible that you will be very successful in making your website seen by most of the people searching related content.

Many web developers and professionals call heading 1 tag the most used tag and heading 6 tag as the least used tag. Heading 1 tag make it is easy for the search engine to index your content at the beginning and this is called the SEO (Search Engine Optimization) the term I was talking about earlier.

Styling Heading Tags

Now I will give you a brief introduction about the styling or applying CSS (Cascading Style Sheet) to the HTML tags. But we will discuss it thoroughly in our upcoming lessons because CSS is the major aspect of Website Designing. It will enhance and beautify your website design. Let's take a look at the example below where I have applied inline CSS to the <h1> tag using the "style" attribute.

<h1 style="color: #ff0000;">This is a red heading</h1>

I have applied style to the markup using inline CSS which is used inside the tags. Keep in mind one important thing that professionals don’t use the color name, they instead use the alternative hash codes, don’t worry you will get used to it soon.

Congratulations you have just learned how the heading works in HTML and how to style them. Remember that I am teaching you the way professionals does their work so you don’t face any issues when you go to the professional field yourself. So, stay tuned as there is a lot more to learn.