What a hero section is, and the four things it must say in five seconds

What is a hero section on a website?

A hero section is the large block at the top of a web page, directly under the navigation. It usually holds four elements: a headline, one or two lines of supporting text, a call-to-action button and an image or product shot.

The name comes from the hero image in web design: the big, wide picture at the top of a page. The block kept the name after many sites swapped the photo for a product screenshot or plain text on a coloured background.

A hero section and above the fold are related, not the same. The fold is a line on the screen: everything a visitor sees before scrolling. The hero is a block in the design. On a laptop the hero often fills the whole first screen. On a phone it often does not fit, and the button drops below the fold.

Why the hero section decides whether people stay

Every visitor sees the hero. Many see little else. Eye-tracking research by Nielsen Norman Group found that 57 percent of viewing time lands above the fold, and the hero sits in that first screen on every device.

Visitors also judge fast. Lindgaard and colleagues measured that people form a stable first impression of a web page in about 50 milliseconds. Then they skim. Jakob Nielsen’s log analysis showed visitors read at most 28 percent of the words on a page, and 20 percent is more likely.

So the hero gets read in fragments: the headline, a few words of the subline, the button label, one glance at the image. If those fragments do not explain the offer, the rest of the page never gets its chance.

In short Write your hero for someone who reads ten words and looks at one picture. Those ten words decide the visit.

The four things a hero section must say in five seconds

A good hero answers four questions before the visitor thinks to ask them. Each element of the block has one of these jobs.

1. What is this? The headline names what you offer, in words a stranger uses. “Accounting software for freelancers” works. “Finance, reimagined” does not.
2. Is it for me? The subline names the audience or the situation. One line, two at most. It turns a category into a fit.
3. Why bother? One concrete outcome or one piece of proof: a result, a number, a customer name people know. Claims without proof read as decoration.
4. What do I do now? One primary button with a verb that says what happens next, such as “Start free trial” or “Get a quote”. A second, quieter link is fine. Two buttons of equal weight are not.

The image supports all four. Nielsen Norman Group’s eye-tracking studies found that visitors study images that carry information, such as product photos and real people, and ignore generic stock photos. Show the product, the result or the customer. A photo of smiling models at a laptop takes the largest area on the page and says nothing.

The parts of a hero section, and how each one fails

Element	Its job	Common failure
Headline	Say what you offer	A slogan or a pun that needs the rest of the page to make sense
Subline	Say who it is for and why it helps	A second slogan, or a paragraph of five lines
Call to action	Show the next step	Two or three buttons of equal weight, or a vague label such as “Learn more”
Image	Show the product or the result	A stock photo, abstract shapes, or an animation that hides the message
Proof	Make the claim believable	Missing, or pushed three screens down

Common hero section mistakes

• A carousel. Rotating slides look like a way to say five things at once. Visitors treat them as one. At the University of Notre Dame, Erik Runyon measured that about 1 percent of homepage visitors clicked a carousel item, and 84 percent of those clicks went to the first one.
• A headline that needs the subline. If the headline alone does not say what you sell, most visitors never learn it. Read the headline aloud to someone outside your company and ask what you do.
• A hero taller than the phone screen. A full-height image on mobile pushes the headline or the button below the fold. Check the hero on a 390-pixel-wide screen before you ship it.
• An animated headline. Words that type themselves or rotate get caught halfway. In a 5sec.io teardown of notion.com, the capture caught the animated headline word mid-cycle as “Scal”.
• Text on a busy photo. White text over a detailed image loses contrast in places. If the text needs a dark overlay to stay readable, the image is doing the wrong job.

How to test your hero section

Run a five-second test. Show the page to someone who has never seen it, take it away after five seconds, and ask three questions: what does this company offer, who is it for, and what would you click? Vague answers point to the hero.

Without a tester, the free five-second test on 5sec.io reads your live page the way a first-time visitor does. It checks whether the headline says what the product is, whether the fold promises an outcome, and whether the hero image backs up the headline, and it quotes the evidence it found. For a whole site, the Above the Fold Audit scores about fifteen key pages and rewrites the weakest copy.

Fix the words before the design. Most weak heroes fail on the headline and the button label, and both are cheap to rewrite. These seven hero section examples show the difference. If the hero passes and visitors still leave, run a conversion optimisation audit on the pages after it.