What a hero section is for

A hero is a design term for a prominent introductory area, often near the top of a page. It is not a standard <hero> HTML element, and it does not have to be the largest box or contain an image.

Make the introduction useful

<header>
  <h1>Learn the CSS box model</h1>
  <p>Compare padding, border and margin in a working example.</p>
  <a href="#lesson">Start the lesson</a>
</header>
<main id="lesson">
  <h2>First comparison</h2>
  <p>Padding sits inside the border; margin sits outside it.</p>
</main>

header {
  max-width: 38rem;
  padding: 1rem;
  background: #eff6ff;
}
a {
  display: inline-block;
  padding-block: 0.7rem;
}

The introduction explains the task and points to the next step. Its header is contextual introductory content, not a special hero tag.

Keep the cost proportionate

A large image can make an introduction slower to load or push the useful material farther down. Choose it only when it contributes to the message, give it suitable text alternatives, and reserve its space to avoid layout shifts.

Exercise: remove the image from a proposed hero and ask whether the task is still clear. Then test a narrow viewport, long heading and zoom. A decorative first impression is not a substitute for the content a person came to use. Compare above the fold and front-end design.

Sources

Reference 1 Reference 2 provide the technical details and current compatibility information.