Simple HTML Code for a Five-Page Website

A five-page website can be built with plain HTML and one CSS file. This example includes Home, About, Services, FAQs and Contact pages. It works without a framework, JavaScript or an internet connection once downloaded.

Download the complete five-page website example.

The example uses a fictional business. Replace every placeholder before using it for a real Kenyan business, school project or portfolio.

What you need

Use a text editor and a web browser. Create a folder containing index.html, about.html, services.html, faq.html, contact.html and style.css. Keep these files together so their relative links work.

1. Add the shared stylesheet

Save this as style.css. It sets readable colours, a flexible navigation row and visible keyboard focus. The skip link lets keyboard users move directly to the page content.

* { box-sizing: border-box; }
body { margin: 0; color: #172b3a; background: #f5f7fa; font-family: system-ui, sans-serif; line-height: 1.6; }
header, main, footer { max-width: 64rem; margin: auto; padding: 1.5rem; }
header { border-bottom: 2px solid #cbd5df; }
.brand { font-size: 1.4rem; font-weight: 700; }
nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
a { color: #075278; text-underline-offset: .2em; overflow-wrap: anywhere; }
a:hover { text-decoration-thickness: .2em; }
a[aria-current="page"] { font-weight: 700; }
a:focus-visible { outline: 3px solid #874800; outline-offset: 4px; }
main { min-height: 55vh; background: white; }
h1 { font-size: clamp(1.8rem, 5vw, 2.7rem); line-height: 1.2; }
p { max-width: 70ch; }
.button { display: inline-block; background: #075278; color: white; padding: .65rem 1rem; border-radius: .3rem; }
.skip-link { position: absolute; left: -10000px; }
.skip-link:focus { left: 1rem; top: 1rem; padding: .5rem; background: white; z-index: 1; }

2. Create the five HTML pages

Save each complete code block under the filename shown. Each page has its own title, description and heading. The navigation marks the current page with aria-current="page".

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="A simple website for an example business.">
  <title>Home | My Business</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <a class="skip-link" href="#main">Skip to content</a>
  <header>
    <p class="brand">My Business</p>
    <nav aria-label="Main navigation">
      <a href="index.html" aria-current="page">Home</a>
      <a href="about.html">About</a>
      <a href="services.html">Services</a>
      <a href="faq.html">FAQs</a>
      <a href="contact.html">Contact</a>
    </nav>
  </header>
  <main id="main">
    <h1>Welcome to My Business</h1>
    <p>This is a fictional business website template. Replace this text with a clear explanation of what you offer and where you work.</p><p><a class="button" href="services.html">Explore our services</a></p>
  </main>
  <footer><p>Example website. Replace all placeholder details before publishing.</p></footer>
</body>
</html>

about.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Learn about the example business and its approach.">
  <title>About | My Business</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <a class="skip-link" href="#main">Skip to content</a>
  <header>
    <p class="brand">My Business</p>
    <nav aria-label="Main navigation">
      <a href="index.html">Home</a>
      <a href="about.html" aria-current="page">About</a>
      <a href="services.html">Services</a>
      <a href="faq.html">FAQs</a>
      <a href="contact.html">Contact</a>
    </nav>
  </header>
  <main id="main">
    <h1>About our business</h1>
    <p>Write your real business story here. Explain who you help and how you work.</p><h2>Our approach</h2><p>Describe your process using facts you can support. Remove sample text before publishing.</p>
  </main>
  <footer><p>Example website. Replace all placeholder details before publishing.</p></footer>
</body>
</html>

services.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Explore the example business service page.">
  <title>Services | My Business</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <a class="skip-link" href="#main">Skip to content</a>
  <header>
    <p class="brand">My Business</p>
    <nav aria-label="Main navigation">
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="services.html" aria-current="page">Services</a>
      <a href="faq.html">FAQs</a>
      <a href="contact.html">Contact</a>
    </nav>
  </header>
  <main id="main">
    <h1>Our services</h1>
    <h2>Service one</h2><p>Describe the first service, what it includes and any important limits.</p><h2>Service two</h2><p>Describe the second service. Add verified prices or explain how customers can request a quotation.</p><p><a href="contact.html">Ask about a service</a></p>
  </main>
  <footer><p>Example website. Replace all placeholder details before publishing.</p></footer>
</body>
</html>

faq.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Find answers to questions about this website template.">
  <title>FAQs | My Business</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <a class="skip-link" href="#main">Skip to content</a>
  <header>
    <p class="brand">My Business</p>
    <nav aria-label="Main navigation">
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="services.html">Services</a>
      <a href="faq.html" aria-current="page">FAQs</a>
      <a href="contact.html">Contact</a>
    </nav>
  </header>
  <main id="main">
    <h1>Frequently asked questions</h1>
    <h2>Is this a real business?</h2><p>No. This is an example to customise with your own accurate details.</p><h2>Can customers pay or book here?</h2><p>This static template does not process payments or bookings. Add a suitable service if your business needs one.</p>
  </main>
  <footer><p>Example website. Replace all placeholder details before publishing.</p></footer>
</body>
</html>

contact.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Contact page for the example business website template.">
  <title>Contact | My Business</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <a class="skip-link" href="#main">Skip to content</a>
  <header>
    <p class="brand">My Business</p>
    <nav aria-label="Main navigation">
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="services.html">Services</a>
      <a href="faq.html">FAQs</a>
      <a href="contact.html" aria-current="page">Contact</a>
    </nav>
  </header>
  <main id="main">
    <h1>Contact us</h1>
    <p>Replace this sample address with your own business email before publishing.</p><p><a href="mailto:hello@example.com">hello@example.com</a></p><p>The link opens an email application if one is configured. This website does not send or store messages.</p>
  </main>
  <footer><p>Example website. Replace all placeholder details before publishing.</p></footer>
</body>
</html>

3. Open and customise the website

1. Open index.html in your browser and click all five navigation links.
2. Replace “My Business” and the sample paragraphs with your own information. Keep headings in a sensible order.
3. Replace hello@example.com in both the visible contact text and the mailto: link. That link opens a configured email app; the website itself does not send messages.
4. When adding an image, use a local file path, a meaningful alt description where appropriate, and suitable dimensions. Compress large images before publishing.
5. Check the site on a phone-sized window and navigate using Tab and Enter. Confirm that the highlighted current-page link is correct on each page.

4. Publish all the files together

Choose hosting that serves static HTML and upload all five pages and the stylesheet to the same directory. Follow the host’s instructions for a domain and HTTPS, then test the public URLs and contact link.

This template does not include a database, account system, contact-form processor, booking system or payment collection. Those features need additional services and configuration.

Tip: If styling disappears, check that the filename is exactly `style.css`, the stylesheet link matches it and the file was uploaded alongside the HTML pages. File-name capitalisation can matter on hosting servers.

Sources and useful links

• MDN: basic HTML syntax
• MDN: structuring documents