How to create hero section in html

HtmlHow-ToBeginner · 3 min read

How to Create a Hero Section in HTML: Simple Guide

To create a hero section in HTML, use a <section> or <header> element with a large heading, descriptive text, and a call-to-action button. Style it with CSS to make it visually striking and responsive.

📐

Syntax

A hero section typically uses a <section> or <header> tag as a container. Inside, include a main heading (<h1>), a paragraph (<p>) for description, and a button or link (<a>) for action.

Use CSS to add background images, colors, and layout styles like centering content.

html

<section class="hero">
  <h1>Main Heading</h1>
  <p>Some descriptive text about your site or product.</p>
  <a href="#" class="btn">Call to Action</a>
</section>

💻

Example

This example shows a simple hero section with a background color, centered text, and a button styled with CSS.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hero Section Example</title>
  <style>
    body, html {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }
    .hero {
      background-color: #4a90e2;
      color: white;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 0 1rem;
    }
    .hero h1 {
      font-size: 3rem;
      margin-bottom: 0.5rem;
    }
    .hero p {
      font-size: 1.25rem;
      margin-bottom: 1.5rem;
      max-width: 600px;
    }
    .btn {
      background-color: #fff;
      color: #4a90e2;
      padding: 0.75rem 1.5rem;
      text-decoration: none;
      border-radius: 0.5rem;
      font-weight: bold;
      transition: background-color 0.3s ease;
    }
    .btn:hover {
      background-color: #dbe9fb;
    }
    @media (max-width: 600px) {
      .hero h1 {
        font-size: 2rem;
      }
      .hero p {
        font-size: 1rem;
      }
    }
  </style>
</head>
<body>
  <section class="hero">
    <h1>Welcome to Our Website</h1>
    <p>Discover amazing content and join our community to stay updated.</p>
    <a href="#signup" class="btn">Get Started</a>
  </section>
</body>
</html>

Output

A full screen blue background section with white centered heading 'Welcome to Our Website', a descriptive paragraph below it, and a white button labeled 'Get Started' that changes shade on hover.

⚠️

Common Pitfalls

Not using semantic tags like <section> or <header> can hurt accessibility and SEO.
Forgetting to add <meta name="viewport"> tag causes poor mobile display.
Using fixed heights without responsive design can break layout on small screens.
Not centering content or using too small font sizes makes the hero less impactful.

html

<!-- Wrong: No semantic tag, no viewport meta -->
<div class="hero">
  <h1>Title</h1>
  <p>Description</p>
</div>

<!-- Right: Semantic section and viewport meta -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <section class="hero">
    <h1>Title</h1>
    <p>Description</p>
  </section>
</body>
</html>

📊

Quick Reference

Use <section> or <header> for the hero container.
Include a large heading (<h1>) and descriptive text (<p>).
Add a clear call-to-action button or link.
Style with CSS for background, colors, and center alignment.
Make it responsive with media queries and viewport meta tag.

✅

Key Takeaways

Use semantic HTML tags like

for your hero section.

Include a clear heading, descriptive text, and a call-to-action button inside the hero.

Style the hero with CSS for background color or image and center the content.

Add the viewport meta tag and use responsive CSS for mobile-friendly design.

Avoid fixed heights and small fonts to keep the hero visually appealing on all devices.