HTML Headings Documentation

how to write HTML Headings

Complete guide to using HTML heading tags (H1 to H6) effectively

Introduction to HTML Headings

HTML headings are titles or subtitles that you want to display on a webpage. They are defined with the <h1> to <h6> tags, where <h1> defines the most important heading and <h6> defines the least important heading.

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

HTML Heading Tags

                Basic Heading Structure
                <h1>Main Title of the Page</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Minor Heading</h4>
<h5>Small Heading</h5>
<h6>Least Important Heading</h6>
            

Heading Hierarchy and Default Sizes

Tag	Importance	Default Font Size	Usage
<h1>	Highest	2em (32px)	Main page title (use only once per page)
<h2>	High	1.5em (24px)	Major section headings
<h3>	Medium	1.17em (18.72px)	Sub-section headings
<h4>	Medium-Low	1em (16px)	Minor headings
<h5>	Low	0.83em (13.28px)	Small headings
<h6>	Lowest	0.67em (10.72px)	Least important headings

Best Practices for Using HTML Headings

Key Guidelines

Use only one <h1> per page - this should be the main title of your content
Maintain a logical hierarchy - don't skip heading levels (e.g., don't go from h2 to h4)
Headings should describe the content that follows them
Use headings to create a clear document structure
Headings improve accessibility for screen reader users
Search engines use headings to understand and index content
You can style headings with CSS, but maintain the semantic hierarchy

Complete HTML Document Example

                Proper Heading Structure in an HTML Document
                <!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    
    <h2>About Me</h2>
    <p>Some information about me...</p>
    
    <h2>My Projects</h2>
    <h3>Web Development</h3>
    <p>Details about web projects...</p>
    
    <h3>Graphic Design</h3>
    <p>Details about design work...</p>
    
    <h2>Contact Information</h2>
    <p>How to reach me...</p>
</body>
</html>
            

HTML Headings Compiler

Practice writing HTML headings in the editor below. The live preview will update as you type. Try creating your own heading structure!

<!DOCTYPE html>
<html>
<head>
    <title>My Heading Practice</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        h1 { color: #2c3e50; }
        h2 { color: #34495e; }
        h3 { color: #5d6d7e; }
        h4 { color: #7f8c8d; }
        h5 { color: #95a5a6; }
        h6 { color: #bdc3c7; }
    </style>
</head>
<body>
    <h1>My Website About Nature</h1>
    
    <h2>Introduction to Forests</h2>
    <p>Forests are essential ecosystems that cover about 31% of the Earth's land area.</p>
    
    <h3>Tropical Rainforests</h3>
    <p>These forests are located near the equator and receive high rainfall.</p>
    
    <h4>Amazon Rainforest</h4>
    <p>The Amazon is the world's largest tropical rainforest.</p>
    
    <h3>Temperate Forests</h3>
    <p>These forests experience four distinct seasons with moderate temperatures.</p>
    
    <h2>Importance of Forests</h2>
    <p>Forests play a crucial role in maintaining ecological balance.</p>
    
    <h3>Carbon Sequestration</h3>
    <p>Forests absorb carbon dioxide from the atmosphere.</p>
    
    <h3>Biodiversity</h3>
    <p>Forests are home to millions of plant and animal species.</p>
</body>
</html>

Live Preview

@prncgr9 project new #fyp #foryou #new #trending ♬ original sound - Zero influencer 10k