Back to Glossary
What Is Hero Section?
Website
Updated 18 September 2026
Quick Answer
The hero section is the large, prominent block at the very top of a webpage — typically featuring a headline, brief supporting text, an image, and a call-to-action — designed to immediately communicate what the page is about.
Hero Section vs. Above the Fold — What's the Difference?
| Hero Section | Above the Fold | |
|---|---|---|
| What it is | A specific design element, usually the first section on a page | The general visible area before scrolling, which the hero section usually occupies |
Why It Matters
- It's often the very first thing a visitor sees, making it the highest-stakes real estate on the entire page.
- A vague or cluttered hero section loses visitors before they even see the rest of the page.
How It Works
- A clear, benefit-focused headline states what the page is about.
- Brief supporting text adds necessary context without overwhelming.
- One clear call-to-action guides the visitor to the obvious next step.
Key Takeaways
- The hero section is the prominent top block of a webpage, distinct from the broader 'above the fold' concept.
- It's the highest-stakes first impression on the page.
- A clear headline and one CTA beats cramming in everything at once.
Frequently Asked Questions
What should a hero section include?
A clear headline, brief supporting text, and one obvious call-to-action — resist the urge to cram in everything at once.
Should a hero section include an image or video?
It's common and often effective, but the headline and CTA matter more than visual polish alone.
How is a hero section different from 'above the fold'?
The hero section is a specific design element; 'above the fold' is the broader visible area, which the hero section usually occupies most of.