04. HTML header tag in English

HTML and CSS through English, HTML and CSS Lessons
HTML and CSS tutorial for beginners in English

Hello friends, welcome to KTL's HTML and CSS tutorial. Today we will study lesson 4.

In our previous lesson, we studied paragraph tag and break tag.

What are header tags?

Today, we will study header tag. Headings are given to documents. We find headings for news in a newspaper. A chapter in a book begins with a heading. Headings are in bigger font sizes and bold. We can give headings for our web pages. Header tags are used for headings in web pages.

So let us begin. Open a new text file. Copy coding from our Lesson-03 script.

<h1> tag is used for giving heading. Therefore, immediately after body tag give header tag <h1>. Below that give heading "Earth - My Planet". Now close header tag - </h1>. After this first paragraph will begin.


HTML header tag in English
Figure 4-1 HTML header tag in English

Click on the above figure for PDF file of source code. Save this program as "Lesson-04". Once again click "Save As" and save program as "Lesson-04.html". Go to windows explorer. Double click on Lesson-04 HTML document. Now heading is displayed in the web page.


HTML header tag, <h1>, Web page with heading
Figure 4-2. Web page with heading

Note that one line is inserted before heading and one line is inserted after heading.

HTML header tags <h1>...<h6>

Do you feel that this heading is in too big font? There are options for displaying headings in different sizes. Headings can be displayed in 6 sizes. Tags <h1>, <h2>, <h3>, <h4>,<h5>, and <h6> are used to display headings.

Let us insert all these headings in our program and see the output.


Save this file as "Lesson-04" and "Lesson-04.html". Go to windows explorer and see output in browser. Heading is displayed in six different font sizes. Click on the figure shown below for PDF file of source code.


HTML header tags in Hindi - <h1>...<h6>
Figure 4-3 HTML header tags - <h1>...<h6>



headings in different sizes, header tags <h1>...<h6>
Figure 4-4. headings in different sizes, header tags <h1>...<h6>

One important point to remember here. We have written 
<h1>Earth - My planet</h1>. This is also correct. Browser reads starting tag <h1>, then reads heading and then reads closing tag for h1. We write one below other only for clarity. For example, when giving two <br /> tags we can write <br /><br />. We can write title element as <title>My HTML"</title>. These are all correct statements.

Important Points:

1. <h1> is used to give heading in a web page.
2. Headings can be given in 6 sizes. Tags <h1>, <h2>, <h3>,<h4>,<h5>, and <h6> are used for this.
3. One blank line is inserted before heading and one blank line is inserted after heading.

Lesson-03                                                             Lesson-05