Just like with every other programming language, HTML possesses **keywords**, which define how the web browser will format and display the content within them, these are called HTML tags.
**HTML tags** are used to indicate the beginning and end of an HTML element within an HTML document.

Tags define how the content within them will be formatted and displayed on a webpage. A standard webpage must have the essential tags. One of which is the `<heading>` tag, which makes up the heading element.






#    
## What is the `<heading>` tag?
The `<heading>` tag is a structural tag that defines the headings for an HTML document from level 1 to 6.
It is represented with `<h1>` through `<h6>` and it possesses a closing tag i.e., `<h2>Content goes here</h2>`





<html>
 <head>
 </head>
 <body>
   <h1>This is a level one header</h1>
   <h2>This is a level two header</h2>
   <h3>This is a level three header</h3>
   <h4>This is a level four header</h4>
   <h5>This is a level five header</h5>
   <h6>This is a level six header</h6>
 </body>
</html>

codemirror

       
## Use cases
* `<Heading>` tags layout headings for an HTML document from level one to six.
* `<Heading>` tags represent six levels of section headings, from the highest section level, `<h1>`, to the lowest section level, `<h6>`.

* Google uses headings to index the structure and content of web pages, so they should be used wisely for [SEO optimization](https://www.digitopia.agency/blog/how-to-structure-your-header-tags-for-seo).
    
* The `<heading>` tags can be used with attributes such as `ID`, `class`, and `align`.  


> The `align` attribute is now considered obsolete, so it can be ignored.

<html>
 <head>
 </head>
 <body>
   
   <h1 id="highest-heading">This should be used once</h1>
 </body>
</html>

#highest-heading {
    color: purple;
}



> They can also be nested to create subsections.


<html>
 <head>
 </head>
 <body>
   <h1 class="main-heading">Intro to headers</h1>
    <h2 class="sub-heading">Intro to sub-headers</h2>
       <h3>Minor headers</h3>
       <h3>Minor headers</h3>
       <h3>Minor headers</h3>
    <h2 class="sub-heading">Intro to sub-headers</h2>
       <h3>Minor headers</h3>
       <h3>Minor headers</h3>
           <h4 id="hello">Hello!</h4>
       <h3>Minor headers</h3>
 </body>
</html>

.main-heading {
    color: purple
}
.sub-heading {
    color: pink;
    text-decoration: underline;
}
h3 {
    margin-left: 10px;
}
#hello {
    color: rebeccapurple;
    margin-left: 25px;
}


## Wrong usages
By default, browsers format headings with bolder and larger fonts, paragraphs, breaks, and whitespace. However:   
* Don't use them to style text. Use CSS instead.
* Don't use more than one `<h1>` heading
per page, as it may create confusion especially for screen reader users.
* Avoid skipping heading levels.


<html>
 <head>
 </head>
 <body>
   
   <h1>Main heading</h1>
    <h5>Sub-heading</h5>
     <h6>Mini-heaading</h6>
 </body>
</html>

## Browser compatibility

They are fully supported across major browsers on mobile and desktop devices.



## Conclusion

* The `<heading>` tags are used to layout the section headings of a webpage in their order of importance.
* The `<heading>` tags can be used with HTML attributes such as `class` and `id`.
* The `<heading>` tags can be nested.
* The `<heading>` tags are cross-browser compatible.

What are HTML <heading> tags?

Just like with every other programming language, HTML possesses keywords, which define how the web browser will format and display the content within them, these are called HTML tags. HTML tags are used to indicate the beginning and end of an HTML element within an HTML document. Tags define how the content within them will be formatted and displayed on a webpage. A standard webpage must have the essential tags. One of which is the  tag, which makes up the heading element. 

What are HTML <heading> tags?

What is the <heading> tag?

Use cases

Wrong usages

Browser compatibility

Conclusion

What is the `<heading>` tag?