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
langattribute 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