<h1>

Defines the most important heading (Level 1)

Quick Answer

What is the HTML <h1> tag?

The <h1> element represents a top-level heading. Use a clear main heading and logical heading levels so readers can follow the page. Google does not prescribe an ideal heading count or order for ranking.

Definition and Usage

The <h1> element establishes the most important heading in an HTML document. It represents the main topic or title of the page.

HTML headings are defined with the <h1> to <h6> tags, where <h1> is the most important and <h6> is the least important.

Important: Use only ONE <h1> per page. This is critical for SEO and accessibility. The <h1> should describe the main purpose or topic of the page.

Tip: Search engines use headings to index the structure and content of your web pages. Use headings to make your content easier to read and understand.

Browser support and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

Examples

Basic H1 Heading

Create a main page heading:

Example
<h1>Welcome to HTML Free Codes</h1>
<p>Learn HTML with our comprehensive tutorials and examples.</p>

H1 with Styling

Style your main heading with CSS:

Example
<style>
  h1 {
    color: #2563eb;
    font-size: 48px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 24px;
  }
</style>

<h1>Professional Website Design</h1>

Document Structure with H1

Use H1 as the main page title with proper hierarchy:

Example
<article>
  <h1>Complete Guide to HTML Headings</h1>

  <h2>What are HTML Headings?</h2>
  <p>HTML headings define the structure of your content...</p>

  <h2>Best Practices</h2>
  <h3>SEO Considerations</h3>
  <p>Search engines use headings to understand content...</p>

  <h3>Accessibility Guidelines</h3>
  <p>Screen readers navigate using headings...</p>
</article>

Semantic Hierarchy

Proper heading hierarchy for a blog post:

Example
<article>
  <h1>10 Tips for Better Web Design</h1>

  <section>
    <h2>Design Principles</h2>

    <h3>1. Use White Space Effectively</h3>
    <p>White space improves readability...</p>

    <h3>2. Choose Colors Carefully</h3>
    <p>Color psychology matters...</p>
  </section>

  <section>
    <h2>Typography Tips</h2>

    <h3>3. Select Readable Fonts</h3>
    <p>Font choice affects user experience...</p>
  </section>
</article>

Heading Hierarchy

HTML headings follow a hierarchical structure from <h1> to <h6>:

H1 - Main Page Title

H2 - Major Section

H3 - Subsection

H4 - Sub-subsection

H5 - Minor heading

H6 - Least important

Warning: Don't skip heading levels. Always go from <h1> → <h2> → <h3>, etc. Never jump from <h1> to <h3> without an <h2> in between.

Default Heading Sizes

Comparison of default sizes for all heading tags:

Tag	Default Size	Importance	Usage
<h1>	2em (32px)	Most Important	Main page title (one per page)
<h2>	1.5em (24px)	High	Major section headings
<h3>	1.17em (18.72px)	Medium-High	Subsection headings
<h4>	1em (16px)	Medium	Sub-subsection headings
<h5>	0.83em (13.28px)	Low	Minor headings
<h6>	0.67em (10.72px)	Least Important	Lowest level headings

SEO Best Practices

One H1 Per Page: Use only one <h1> tag per page for the main title
Descriptive Content: Make your H1 clearly describe the page's main topic
Include Keywords: Naturally incorporate relevant keywords in your H1
Keep the main heading clear and descriptive. Google specifies no ideal heading character count for ranking.
Match Page Title: H1 should align with your page's <title> tag
Logical Hierarchy: Follow proper heading order (don't skip levels)
Unique H1: Each page should have a unique H1 tag
Avoid Over-Styling: Don't hide H1 with CSS or make it invisible

Accessibility

Screen readers and assistive technologies rely on heading structure for navigation:

Navigation Aid: Screen readers use headings to create a page outline
Skip Navigation: Users can jump between headings to find content quickly
Logical Order: Maintain proper hierarchy for screen reader users
Semantic Meaning: Headings convey document structure and importance
Never Skip Levels: Always use headings in sequential order
Don't Use for Styling: Use CSS for visual styling, not heading tags

Accessibility Tip: Many screen reader users navigate by headings. A well-structured heading hierarchy greatly improves accessibility and user experience.

CSS Styling Examples

Modern H1 Design

Example
<style>
  h1 {
    font-size: 48px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 24px;
  }
</style>

<h1>Beautiful Gradient Heading</h1>

H1 with Underline Effect

Example
<style>
  h1 {
    font-size: 42px;
    font-weight: 700;
    color: #1f2937;
    position: relative;
    display: inline-block;
    padding-bottom: 16px;
  }

  h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border-radius: 2px;
  }
</style>

<h1>Heading with Underline</h1>

Responsive H1 Sizing

Example
<style>
  h1 {
    font-size: clamp(28px, 5vw, 56px);
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    margin: 0 0 24px 0;
  }

  @media (max-width: 768px) {
    h1 {
      font-size: 32px;
    }
  }
</style>

<h1>Responsive Main Heading</h1>

Common Mistakes to Avoid

DON'T:

Use multiple <h1> tags on a single page
Skip heading levels (e.g., H1 → H3 without H2)
Use headings just to make text bold or large
Hide H1 tags with CSS (display: none or visibility: hidden)
Stuff H1 with too many keywords (keyword stuffing)

DO:

Use one descriptive <h1> that summarizes the page
Follow proper heading hierarchy (H1 → H2 → H3...)
Make H1 clear, concise, and relevant
Use CSS for styling instead of choosing headings by size
Ensure H1 is visible and meaningful to users

Related Tags

<h2>
Level 2 heading
<h3>
Level 3 heading
<h4>
Level 4 heading
<h5>
Level 5 heading
<h6>
Level 6 heading
<header>
Header section container