Headings(in HTML)
Tags: html, webdev, beginners, programming
Published: 2023-10-05 06:01:35

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:

```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>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
    </body>
</html>
```

![All the 6 headings in index.html on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b8knnc983a94z0mn2d19.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mgz2382clf4p08otybkr.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a65on68n3k0szojyyce7.png '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 +`:

```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>
        <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>
```

![Heading 1 duplicated in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jha4w8flamt4k2w5q35l.png '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>`:

```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>
```

![Heading 2 with the word HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f99bjq8wa257216hc50y.png 'Heading 2 with the word HTML')

and here, we can type `HTML`:

```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>
```

![Heading 2 with the word HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v25eo4zgus5029vrs1pa.png 'Heading 2 with the word HTML')

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

```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>
        <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>
```

![A paragraph in the code with the word HTML Tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4aq6hdrqdy7exw2echm0.png 'A paragraph in the code with the word HTML Tutorial')

For the full free course, → [HTML and CSS Handbook for Beginners](https://karlgusta.substack.com/p/html-and-css-handbook-for-beginners)

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

```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>
        <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>
```

![Heading 2 with the word CSS in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jumni39um94y40urkvnr.png '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`:

```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>
        <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>
```

![A paragraph with the word CSS Tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rqg4xupvrhnga1it6g60.png 'A paragraph with the word CSS Tutorial')

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

```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>
        <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>
```

![Four headings being deleted on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vy37gsoquw5oq9vnqhbk.png 'Four headings being deleted on VS Code')

Now they are deleted.

```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>
        <p>HTML Tutorial</p>
        <h2>CSS</h2>
        <p>CSS Tutorial</p>
    </body>
</html>
```

![The four headings deleted on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bcpxyoeklrvoxkq5lz3h.png 'The four headings deleted on VS Code')

Let's take a look now.

![The page on the browser without the four images deleted](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5g8qs04jan43co089oy7.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cpv14479bm276t95fz0f.png '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:

```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>
        <p>HTML Tutorial</p>
        <h2>CSS</h2>
        <p>CSS Tutorial</p>
    </body>
</html>
```

![The heading one and two heading two elements on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7d0ljrn0cd9kjem3zk9.png '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`:

```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>
        <p>HTML Tutorial</p>
        <h3>Code</h3>
        <h3>Exercise</h3>
        <h2>CSS</h2>
        <p>CSS Tutorial</p>
    </body>
</html>
```

![Two heading 3 elements with the words code and exercise on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lrj6xyg47eulyf38rmjp.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzjkhct19lx3a6lv224e.png '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!