HOME HTML CSS Javascript PHP Laravel

HTML Headings

In this tutorial we will learn how to create all headings tags in HTML. The heads of a page are defined using the HTML heading element. HTML defines six different levels of headers. h1, h2, h3, h4, h5 and h6 are the six heading elements, with h1 being the highest and h6 being the lowest.

Example of HTML Headings

The greatest heading tag is h1 and the lowest is h6. As a result, the most essential heading is h1 and the least important is h6.

The following code shows all the heading layers used.

Example

Edit it yourself 
<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>

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

</body>
</html>

Output of HTML Headings

Browsers show heads in a bigger, bolder font than normal text by default. Also, <h1> headings have the highest font size, whilst <h6> headings have the smallest font size.

Output

Edit it yourself

This is a Heading 1

This is a Heading 2

This is a Heading 3

This is a Heading 4

This is a Heading 5
This is a Heading 6

Headings Are Important

Users frequently scan a page based on the headlines. It's critical to utilise headers to demonstrate how the material is organised.

The structure and content of your web pages are indexed by search engines using headers.

For key headers, use h1 headings, then h2 headings, then the less important h3, headings, and so on.

Notes : When you use the heading element on a web page, the built-in style sheets in your browser produce some empty space (known as margin) before and after each heading. To alter the browser's default style sheet, utilize the CSS margin attribute.
Tip : Using CSS font attributes, you may quickly alter the appearance of HTML heading elements, such as font size, boldness, typeface, and so on.