The prominent top section of a webpage that typically communicates the primary message and desired next action.
A high-visibility area that should quickly explain value and guide visitors forward.
Short and sweet:
The prominent top section of a webpage that typically communicates the primary message and desired next action.
A high-visibility area that should quickly explain value and guide visitors forward.
See also: Above the Fold, Value Proposition, Call to Action
A hero section is the large, prominent block at the very top of a webpage, typically pairing a headline, a short supporting line, an image or video, and a primary call to action into the very first thing a visitor sees before scrolling any further. Because it occupies the most valuable real estate on the page, it carries outsized responsibility for communicating what a business offers and why someone should care within just a few seconds. A hero section trying to communicate too many messages at once often ends up delivering none of them clearly, which is why the strongest versions tend to focus on a single, sharp message rather than covering everything a page has to offer.
Airbnb’s homepage hero section features a huge search bar over a beautiful travel photo, immediately telling a visitor exactly what to do the moment the page loads.
Slack’s version of this pairs a short, punchy headline about team communication with a single “Get Started” button, leaving no confusion about the very first step.
A startup’s landing page might test several versions of this top area, swapping headlines and images to see which combination gets the most visitors to keep scrolling instead of bouncing immediately.
