HTML Heading|HTML Tutorial Part 1
HTML tags are basic html elements that assists you to structure your HTML document and Heading tags are used to write different headings for a html document as explained in detail in this post.
Introduction
This HTML guide is part of the full-stack web development course, starting from basic HTML. In this post, we will learn what are HTML tags and how to write the heading tag in HTML. These tags are usually some words enclosed by angle brackets, that is written as < and >.
The basic HTML tags that form part of the structure of a document in html are heading tags, paragraph tags and listing tags. There are several more tags, but, we will go through all of them in different posts, so that , you are not burdened to learn all of the basics in just one sitting!
Headings
Every document has different types of headings and html has 6 types of heading tags , namely, h1 ,h2 ,h3, h4, h5 and h6.
Let’s understand the differences between the different heading tags mentioned above. Based on a decreasing chronological order, h1 is the largest heading, h2 is smaller than h1, h3 is smaller than h2, h4 is smaller than h3 , h5 is smaller than h4, h3 is smaller than h4 and h2 is smaller than h1.
The following code will show you the difference between the different heading tags. Please note that there will be an opening and closing tag for all the tags including the heading tags. The opening tag is written as <> and the closing tag is written as </>. In between each of the opening and closing tags, we will be writing some text as shown below, but, when you see the output in the console, you will get the output in different sizes due to the differences between the heading tags h1 ,h2, h3, h4, h5 and h6 as explained above.
Code
<h1>Hello World!</h1>
<h2>Hello World!</h2>
<h3>Hello World!</h3>
<h4>Hello World!</h4>
<h5>Hello World!</h5>
<h6>Hello World!</h6>Output
Hello World!
Hello World!
Hello World!
Hello World!
Hello World!
Hello World!
Conclusion
As you can see in the output, the different heading tags in the decreasing order from h1 to h6, gives the above output in terms of the different sizes of the heading text as shown above in the console. H1 heading tag gives us the biggest heading text size for our html document text. So, we now learnt how to define different headings in an html document by using the headings tags.
In the next post, we will learn how to do the paragraph tags.