Hero section

Write the hero section with main heading, subheading and CTA button.

The hero section

The hero is the big section at the top of the page. The visitor should grasp what the product does in seconds. Three elements are enough:

an <h1> with a strong tagline
a <p> with a short pitch
an <a> or <button> call to action

All wrapped in <main>; the main content lives there.

Head settings

The <head> section carries the page's identity and settings. You add:

the lang attribute on <html> for the language
<meta charset> sets character encoding
<meta name="viewport"> controls mobile scaling
<title> sets the tab title

Without these the page looks tiny on mobile and special characters break.

Exercise Add head settings and the hero

Take the empty skeleton from the previous lesson. Add a lang attribute to <html>, and inside <head> add meta charset, viewport and a non-empty title. Inside <body> add a <main> with an h1 (tagline), a p (pitch), an a (signup link, with href) and a button (request a tour).

Show example solution

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TaskFlow - Task management</title>
  </head>
  <body>
    <main>
      <h1>Keep tasks in flow, not in mind</h1>
      <p>Manage your team's tasks, deadlines and progress from a single panel with TaskFlow.</p>
      <a href="/signup">Start free</a>
      <button>Request a tour</button>
    </main>
  </body>
</html>

Test yourself

Write the name value of the meta tag for mobile fit

<meta name="____" content="width=device-width, initial-scale=1">

Show answer

<meta name="viewport" content="width=device-width, initial-scale=1">

What does the viewport meta tag do?
- Sets the page title
- Sets character encoding
- Controls mobile scaling
- Defines the language
Show answer

Controls mobile scaling — Correct. viewport makes the page render at the right scale on mobile devices.
Match each head element to its role

lang

Page language
charset

Character encoding
viewport

Mobile scaling
title

Tab title

Next lesson: Feature list

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies