Heading Tags ?

Heading Tags are semantic tags and used to wrap heading or subheading of a webpage as well as heading of a section or sub-section or a paragraph or literally any contents that needs heading/subheading.

Based on priority, like for heading of a webpage, we will use h1 tag. Normally we have only one h1 tag in a webpage. Then sub-headings can be wrapped with h2 tags. Then inside sub-headings, we can have many sections or articles, where we could use any of h3 or h4 or h5 or h6 tags.
If you have many headings or nested headings, then based on priority, you could arrange your headings. h1 tag has highest fontsize around 40px and as we go from h1 tag to h6 tag, fontsize will be smaller and so is the heading.

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

Why should we use Heading Tags ?

Heading tags serve several purposes in web development.

1. Semantic structure : Heading tags give a web page a semantic structure and help search engines and assistive technologies understand the hierarchy and meaning of the content.

2. Accessibility : Well-structured headings improve accessibility for users of screen readers and other assistive technologies. Headings make it easier to navigate your page.

3. Visual Styling : Heading tags also offer default visual styling, allowing web browsers and CSS stylesheets to apply appropriate formatting automatically.

Best Practices

It's crucial to use heading tags in accordance with some best practices.

1. Sequential orders : Heading tags are used in a sequential manner, beginning with the <h1> for main title and concluding with subheadings and lower-level headings.

2. Don't skip levels : Avoid skipping heading levels (such as from <h1> to <h3>). It's crucial to have a logical and consistent structure.

3. Main heading :
The main subject or page title should be represented by exactly one heading on each page.

4. Use descriptive text : Write clear, short headlines that adequately summarize the section's content.

By using heading tags correctly, you can improve the structure, accessibility, and styling of your web pages. Headings play a vital role in organizing content and providing a better user experience. Remember to use them appropriately and adhere to best practices for optimal results.

Note::
Please do not forget that all the headings tag from h1 to h6 are block level element. And if you remember, it has top/bottom/right/left extra margins and paddings by default.
FYI :: These extra margins and paddings we need to remove from all block elements and then only UI will be consistent and follow css box model, obviously when we go to css.