Real Project: Landing Page
6 min read
A complete landing page uses semantic structure: header with nav, main with hero, features, and pricing sections, and footer. All images have alt text, inputs have labels, headings are hierarchical, and JSON-LD is in the head.
Landing Page Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Product — Tagline</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav><a href="#">Logo</a> <a href="#features">Features</a></nav>
</header>
<main>
<section id="hero"><h1>Headline</h1><p>Tagline</p></section>
<section id="features"><h2>Features</h2></section>
<section id="pricing"><h2>Pricing</h2></section>
</main>
<footer><p>© 2024 Company</p></footer>
<script src="app.js" defer></script>
</body>
</html>