Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create headings in HTML page?

HTML Web Development Front End Technology

Headings are the titles or subtitles of content that you want to display on a web page. They help users understand the structure and hierarchy of information, making content easier to scan and navigate. HTML provides six different levels of heading tags, from <h1> to <h6>, where <h1> represents the most important heading and <h6> the least important.

Heading tags should be used in logical order to create proper document structure. Use <h1> for main headings, followed by <h2> for major sections, then <h3> for subsections, and so on. This hierarchy is important for both search engine optimization and accessibility.

Syntax

Following is the syntax for HTML heading tags −

<h1>Main Heading</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Minor Heading</h4>
<h5>Sub-minor Heading</h5>
<h6>Smallest Heading</h6>

All heading tags are block-level elements, meaning they start on a new line and take up the full width available. They automatically add margins above and below for spacing.

Basic Heading Example

Following example demonstrates using a single <h1> heading tag −

<!DOCTYPE html>
<html>
<head>
   <title>Single Heading Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
   <h1>HTML Articles - Main Heading</h1>
   <p>This is a paragraph that follows the main heading.</p>
</body>
</html>

The output displays a large, bold heading followed by regular paragraph text −

HTML Articles - Main Heading  (large, bold text)
This is a paragraph that follows the main heading.

All Heading Levels Example

Following example shows all six heading levels together −

<!DOCTYPE html>
<html>
<head>
   <title>All Heading Levels</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
   <h1>Heading Level 1 - Largest</h1>
   <h2>Heading Level 2 - Large</h2>
   <h3>Heading Level 3 - Medium-Large</h3>
   <h4>Heading Level 4 - Medium</h4>
   <h5>Heading Level 5 - Small</h5>
   <h6>Heading Level 6 - Smallest</h6>
   <p>This is regular paragraph text for comparison.</p>
</body>
</html>

The output shows decreasing font sizes from <h1> to <h6> −

Heading Level 1 - Largest      (largest, bold)
Heading Level 2 - Large        (large, bold)
Heading Level 3 - Medium-Large (medium-large, bold)
Heading Level 4 - Medium       (medium, bold)
Heading Level 5 - Small        (small, bold)
Heading Level 6 - Smallest     (smallest, bold)
This is regular paragraph text for comparison.
HTML Heading Hierarchy H1 H2 H3 H4 H5 H6 Main page title, article title Major section headers Subsection headers Minor section headers Sub-minor headers Smallest section headers

Customizing Heading Size

You can customize the size of headings using the style attribute with the font-size property. This allows you to override the default browser styling for headings.

Syntax

Following is the syntax for customizing heading font size −

<h1 style="font-size: 40px;">Custom Size Heading</h1>

Example

Following example demonstrates customizing heading sizes with inline CSS −

<!DOCTYPE html>
<html>
<head>
   <title>Custom Heading Sizes</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
   <h1 style="font-size: 40px; color: #2c3e50;">Custom Large Heading</h1>
   <h2 style="font-size: 24px; color: #e74c3c;">Custom Medium Heading</h2>
   <h3 style="font-size: 18px; color: #27ae60;">Custom Small Heading</h3>
   <p>Regular paragraph text for size comparison.</p>
</body>
</html>

The output shows headings with custom sizes and colors −

Custom Large Heading   (40px, dark blue)
Custom Medium Heading  (24px, red)  
Custom Small Heading   (18px, green)
Regular paragraph text for size comparison.

Proper Heading Structure

Following example demonstrates proper heading hierarchy in a typical webpage structure −

<!DOCTYPE html>
<html>
<head>
   <title>Proper Heading Structure</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px; line-height: 1.5;">
   <h1>Complete HTML Tutorial</h1>
   
   <h2>Introduction to HTML</h2>
   <p>HTML stands for HyperText Markup Language...</p>
   
   <h2>HTML Elements</h2>
   <p>HTML elements are the building blocks...</p>
   
   <h3>Block Elements</h3>
   <p>Block elements take up the full width...</p>
   
   <h4>Heading Elements</h4>
   <p>Heading elements create hierarchy...</p>
   
   <h3>Inline Elements</h3>
   <p>Inline elements only take up necessary space...</p>
</body>
</html>

This creates a logical document outline that is accessible and SEO-friendly.

Default Heading Styles

Following table shows the default styling characteristics of HTML heading elements −

Heading Tag Default Font Size Font Weight Typical Use
<h1> 2em (32px) bold Page title, main heading
<h2> 1.5em (24px) bold Section headers
<h3> 1.17em (18.72px) bold Subsection headers
<h4> 1em (16px) bold Minor section headers
<h5> 0.83em (13.28px) bold Sub-minor headers
<h6> 0.67em (10.72px) bold Smallest section headers

Best Practices

When using HTML headings, follow these best practices −

  • Use only one <h1> per page − This represents the main topic or title of the page.

  • Maintain logical hierarchy − Don't skip heading levels (e.g., don't jump from <h1> directly to <h3>).

  • Use headings for structure, not styling − Choose heading levels based on content hierarchy, not appearance.

  • Keep headings descriptive − Headings should clearly describe the content that follows.

Conclusion

HTML headings from <h1> to <h6> create document structure and hierarchy, with decreasing font sizes and importance levels. Use them in logical order for proper SEO and accessibility, with <h1> for main titles and subsequent levels for sections and subsections. You can customize their appearance using CSS while maintaining semantic structure.

Updated on: 2026-03-16T21:38:53+05:30

5K+ Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements