HTML Basics Tutorial 3 – HTML Headings
Notes from the video ‘HTML Course Singapore | Learn HTML Programming | HTML Tutorial 3 – HTML Header’:
What are HTML headings?
HTML headings provide valuable information to users and search engines like google by highlighting the important parts of the webpage and showing the structure of the webpage.
There are six different headings in HTML. They are h1, h2, h3, h4, h5 and h6.
Down h1 to h6, the font size and importance of the headings decreases.
h1 heading is the largest and is the most important heading.
h1 headings are bigger in font size and more important that h2 headings. h2 headings are bigger in font size and more important than h3 headings and so on.
h6 heading is the smallest in font size and is the least important heading.
You don’t have to include all different headings in your webpage.
However, it’s important that you include one h1 heading in your webpage because search engines use headings to understand the structure of your webpage and h1 headings serve as the main header for the webpage.
So we also recommend that you only include one h1 heading in your page or search engines would be confused about the structure of your page.
As for the other headings, you can include as many h2, h3, h4, h5 or h6 headings in your webpage as you wish. We recommend that you use these headings as subheadings and reserve the h1 heading for the main heading of your webpage.
Let’s look at an example of a heading element.
Each heading element begins with a start tag.
- A <h1> element starts with <h1>
- A <h2> element starts with <h2>
Each heading element ends with an end tag.
- A <h1> element ends with </h1>
- A <h2> element ends with </h2>
Note that the characters in the start and end tags are in all-lowercase.
Between the start and end tag, we have the element content, which is what’s displayed on our webpage.
For example, if we were to key in About Our Company as the <h1> element content and Our Team as the <h2> element content, they would be displayed in our webpage.
Since About Our Company is the <h1> element content , it is more important and bigger in font size compared to Our Team which is a <h2> element content.
The <h1> heading, or the main heading of the webpage, tells the users and search engine that this webpage is mainly about information on the company.
The <h2> heading tells the users and search engine that the information about the team in the company is one of the important parts of the webpage.