The top and bottom of the page
Every HTML page starts by telling the browser it’s a modern HTML page (the doctype), then wraps everything in an <html> tag that says what language the page is in.
<!DOCTYPE html>
<html lang="en-GB">
<!-- Everything else goes between these two tags -->
</html>The lang attribute helps screen readers pronounce your text correctly and helps search engines show your page to the right people. Use en-GB for British English. For any other language, look up the right code with our language code finder.
The head: information about the page
The <head> isn’t shown on the page. It tells browsers, search engines and social networks about the page.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Plumber in Mansfield | Smith & Sons Plumbing</title>
<meta name="description" content="Family-run plumbers covering Mansfield and
Sutton in Ashfield. Boiler repairs, bathrooms and emergency call-outs.">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://www.your-domain.com/">
<!-- How the page looks when shared on social media -->
<meta property="og:type" content="website">
<meta property="og:title" content="Plumber in Mansfield | Smith & Sons Plumbing">
<meta property="og:description" content="Family-run plumbers covering Mansfield.">
<meta property="og:url" content="https://www.your-domain.com/">
<meta property="og:image" content="https://www.your-domain.com/images/share.png">
<meta name="twitter:card" content="summary_large_image">
<!-- Favicons (see step 4) -->
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="stylesheet" href="/css/style.css">
</head>| Line | What it does |
|---|---|
charset | Says the text is UTF-8, so £, é and ’ display properly. Keep it first. |
viewport | Makes the page fit phone screens instead of showing a tiny desktop page. |
title | The blue headline in search results and the text on the browser tab. Make it unique for every page and keep it under about 60 characters. |
description | Often used as the snippet under your headline in search results. About 150–160 characters, written to make someone click. |
robots | index, follow lets search engines list the page; use noindex for pages that shouldn’t appear. |
canonical | The one “official” address for this page, so search engines don’t treat copies (with or without www, with tracking codes…) as duplicates. |
og: and twitter: | The title, description and image used when someone shares the page on social media or in a message. The image should be 1200 × 630 pixels. |
stylesheet | Links your CSS file, which controls colours, fonts and layout. Keep styles in one file rather than scattered through the page. |
The body: what visitors see
Everything inside <body> appears on the page. Modern HTML has tags that describe each part of the page — <header>, <nav>, <main> and <footer>. They make no visual difference by themselves, but screen readers and search engines use them to understand your page.
<body>
<a class="skip-link" href="#main">Skip to main content</a>
<header>
<a href="/"><img src="/images/logo.svg" width="160" height="40" alt="Smith & Sons Plumbing"></a>
<nav aria-label="Main">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<main id="main">
<h1>Plumbers in Mansfield</h1>
<p>The actual page content goes here.</p>
</main>
<footer>
<p>© 2026 Smith & Sons Plumbing</p>
</footer>
<script src="/js/site.js" defer></script>
</body>- One
<h1>per page, saying what the page is about. Use<h2>and<h3>for sections below it, in order. - Every image needs
alttext describing it, for people who can’t see it — oralt=""if it’s purely decorative. - The skip link lets keyboard users jump past the menu straight to the content.
deferon the script lets the page appear before the JavaScript has finished loading.
The complete page
Put it all together and you have a complete, valid page. Copy it, save it as index.html (or index.php), change the words, and upload it.
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Plumber in Mansfield | Smith & Sons Plumbing</title>
<meta name="description" content="Family-run plumbers covering Mansfield and
Sutton in Ashfield. Boiler repairs, bathrooms and emergency call-outs.">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://www.your-domain.com/">
<!-- How the page looks when shared on social media -->
<meta property="og:type" content="website">
<meta property="og:title" content="Plumber in Mansfield | Smith & Sons Plumbing">
<meta property="og:description" content="Family-run plumbers covering Mansfield.">
<meta property="og:url" content="https://www.your-domain.com/">
<meta property="og:image" content="https://www.your-domain.com/images/share.png">
<meta name="twitter:card" content="summary_large_image">
<!-- Favicons (see step 4) -->
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<a class="skip-link" href="#main">Skip to main content</a>
<header>
<a href="/"><img src="/images/logo.svg" width="160" height="40" alt="Smith & Sons Plumbing"></a>
<nav aria-label="Main">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<main id="main">
<h1>Plumbers in Mansfield</h1>
<p>The actual page content goes here.</p>
</main>
<footer>
<p>© 2026 Smith & Sons Plumbing</p>
</footer>
<script src="/js/site.js" defer></script>
</body>
</html>On a PHP site you’d move the head and header into one shared file and the footer into another, then include them on every page — change the menu once and it changes everywhere. That’s exactly how this site works — on OnPoint Hosts, which runs PHP on every plan.