HTML Heading

Written by Philip

A HTML Heading is usually used to display the title or the sub-title of the web page content to the user. It can also be used to display other important text to the user.

I.e. Take this passage for example;

Main Heading

This tutorial on How-To-Code.com relates to Headings, above we can see that a H1 HTML element is being used to display the title. (View Source on Page)

Sub-Heading

Above we can see that the sub-heading is being displayed using the H2 HTML element. (View Source on Page)

Now take a look at the following HTML code used to display the H1 and H2 text above.

<h1>Main Heading/h1>

<h2>Sub-Heading</h2>

Above we can see that the sub-heading is being displayed using the H2 HTML element.

As you can see the <h1> HTML element is used to display the main page title, and the <h2> HTML element is being used to display the sub-heading.

The Headings run from the <h1> heading to the <h6> heading.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Code for Above

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

The text within the headings can be styled using CSS. Above you can see the styling’s we use on the How-To-Code.com website.

Do not use Bold or Italics to display a heading use a HTML heading tag. Using HTML heading tags also helps in terms of SEO (Search Engine Optimisation), as search engines use the heading tags to know what the content of your webpage is about.