DEV Community

Cover image for Headings(in HTML)
Karl Esi
Karl Esi

Posted on

Headings(in HTML)

#html #webdev #beginners #programming

So, in HTML, we have 6 heading elements. These are:

<h1>This is heading one</h1>
<h2>This is heading two</h2>
<h3>This is heading three</h3>
<h4>This is heading four</h4>
<h5>This is heading five</h5>
<h6>This is heading six</h6>

This is the code on VS Code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

All the 6 headings in index.html on VS Code

So, let's see what we have when we run the code.

All the headings on a page in the browser

Now, heading one represents the most important heading, and heading 6 represents the least important heading.

Now, a common mistake I see amongst a lot of people is that they choose this headings based on their size. They choose, let's say, heading four because of the size. That is not how you are supposed to use headings because the size can always be changed using CSS. It is a matter of styling.

We should use these heading elements to create a hierarchy.

The heading 1 highlighted

Every web page should have one and only one heading one (<h1></h1>) element.

This heading represents what this page is all about. Well, nothing happens if we have multiple <h1></h1> elements.

For example, I can duplicate this to say heading one +:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <h1>Heading 1</h1>
        <h1>Heading 1+</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Heading 1 duplicated in VS Code

Now, look we have two <h1></h1> elements. But, this is going to confuse search engines. They are not going to figure out what this page is all about.

So, every page should have a single <h1></h1> element.

Now, after we use <h1></h1> now we should use <h2></h2> We should not jump to <h4></h4>.

So, lets say on this page we are going to have two sections. One for HTML, the other for CSS. Now, my next heading should be <h2></h2>:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <h1>Heading 1</h1>
        <h2>HTML</h2>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Heading 2 with the word HTML

and here, we can type HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <h1>Heading 1</h1>
        <h2>HTML</h2>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Heading 2 with the word HTML

Then below this heading, we can have some text. So, I am going to say HTML Tutorial:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <h1>Heading 1</h1>
        <h2>HTML</h2>
        <p>HTML Tutorial</p>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

A paragraph in the code with the word HTML Tutorial

For the full free course, → HTML and CSS Handbook for Beginners

Our next heading should be <h2></h2>.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <h1>Heading 1</h1>
        <h2>HTML</h2>
        <p>HTML Tutorial</p>
        <h2>CSS</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Heading 2 with the word CSS in VS Code

This is the CSS section. In this section, we can have some additional text, lets say CSS Tutorial:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <h1>Heading 1</h1>
        <h2>HTML</h2>
        <p>HTML Tutorial</p>
        <h2>CSS</h2>
        <p>CSS Tutorial</p>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

A paragraph with the word CSS Tutorial

Now, I am going to delete these four headings below.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <h1>Heading 1</h1>
        <h2>HTML</h2>
        <p>HTML Tutorial</p>
        <h2>CSS</h2>
        <p>CSS Tutorial</p>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Four headings being deleted on VS Code

Now they are deleted.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <h1>Heading 1</h1>
        <h2>HTML</h2>
        <p>HTML Tutorial</p>
        <h2>CSS</h2>
        <p>CSS Tutorial</p>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

The four headings deleted on VS Code

Let's take a look now.

The page on the browser without the four images deleted

We have a hierarchy. On the top, we have an <h1></h1> element. Below that, we have two <h2></h2> elements.

The page on the browser with the heading one element and two heading two elements

Now, let's say in the HTML section, we are going to have two subsections. There, we should use <h3></h3> elements.

So, here is our HTML section:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <h1>Heading 1</h1>
        <h2>HTML</h2>
        <p>HTML Tutorial</p>
        <h2>CSS</h2>
        <p>CSS Tutorial</p>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

The heading one and two heading two elements on VS Code

In this section, we are going to have two <h3></h3> elements, Code and Exercise:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <h1>Heading 1</h1>
        <h2>HTML</h2>
        <p>HTML Tutorial</p>
        <h3>Code</h3>
        <h3>Exercise</h3>
        <h2>CSS</h2>
        <p>CSS Tutorial</p>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Two heading 3 elements with the words code and exercise on VS Code

Now, take a look.

The page on the browser with the words code and exercise

So, we have a proper hierarchy! This is how we should use these heading elements. The better we can represent the structure using HTML, the better search engines can read and understand our content.

So, that is all about text.

Happy Coding!

Top comments (0)

Read next

techno_expert profile image

6 Common Web Development Myths You Need to Stop Believing

Vrinsoft Pty Ltd -

kajal393 profile image

Free Project Management Software

Kajal Shrama -

kajal393 profile image

Website Visitor Tracking Tool

Kajal Shrama -

skolaczk profile image

Next.js starter template

Michał Skolak -