HTML Headings

HTML heading is titles or subtitles that creator want to display on a webpage.

Headings help determine the hierarchy and structure of web page content.

The heading define a title at the head of a page or section of a book. It is very important to have various types of headings to structure the content of the web pages.

Headings help search engines to know and index the framework of the web page.

HTML headings can be used with nested elements.


html headings

Types of html headings

There are 6 types of headings in HTML: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>

The <h1> - <h6> tags are used to mark out headings according to their importance.

The <h1> tag used for the most important heading of the web pages and the <h6> used for the smallest heading.

By default, browsers display headings in bigger and stronger font than normal text. Also, <h1> headings are displayed in largest font, whereas <h6> headings are represented in smallest font.

Syntax

<heading_level>....text of heading....</heading_level>

You can Understood this from below example lines

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

Example

<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <h1>Heading Types 1</h1> <h2>Heading Types 2</h2> <h3>Heading Types 3</h3> <h4>Heading Types 4</h4> <h5>Heading Types 5</h5> <h6>Heading Types 6</h6> </body> </html>

Output

Heading Types 1

Heading Types 2

Heading Types 3

Heading Types 4

Heading Types 5
Heading Types 6

how to modify font size in heading tags

We can modify the default size of the headings. Set the size of any heading using the CSS font-size property:

Example

<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> h1 { font-size: 50px; } </style> </head> <body> <h1>This is heading 1</h1> </body> </html>

Output

This is heading 1


Importance of Headings

  • HTML headings gives valuable information by highlighting important topics and the framework of the document, so optimize them carefully to improve user Task.
  • Use only single <h1> tag on any web page. The tag must describe what your page headlines is about and also contain a keyword to improve rankings in Google searches.
  • Since search engines, such as Google, use headings to index the structure and subject of the web pages so use them very prudentially in your webpage. means that Search Engines use headings for listing the structure and content of the webpage.
  • Use the <h1> headings as main headlines of your web page, followed by the <h2> headings, then the less important <h3> headings, and so on....

Important Notes

here are Important notes for using html heading tags

  • Don't use heading tags to increase text size or make text bold. Instead, you should use CSS properties like font-weight and font-size or bolt. Remember, search engines use headings to structure the content subject.
  • Don't skip heading levels. Use the <h1> as the main headings of the webpage, followed by the <h2> headings, then the less important <h3> headings, and so on till h6 headings.
  • Avoid using <h1> more than one on a page.
  • Every time need to place a heading tag on a web pages, the web browser built-in style sheets automatically build some empty space (called margin) before and after each heading. You can use the CSS margin property to override the browser's default style sheet.
  • You can simply customize appearance of heading tags such as their fonts size, boldness, typeface, etc. using the CSS font properties.
  • Avoid using heading elements to resize text. Instead, use the CSS font-size property.
  • Heading information can be used by user representative to construct a table of contents for a document automatically.