Standard HTML5 Template

Every web page starts with an HTML skeleton. It looks simple, yet it determines the semantics, accessibility, SEO, and long-term maintenance cost of everything built on top of it. The template below is ready to copy and adapt; I'll walk through why each tag is there and when you can safely trim it.

A Ready-to-Use Skeleton

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Page Title · Brand Name</title>
  <meta name="description" content="Page description for search engines">
  <meta property="og:title" content="Share Title">
  <meta property="og:description" content="Share description">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav class="nav">
    <div class="container">
      <a href="/" class="logo">Logo</a>
      <ul class="menu">
        <li><a href="/">Home</a></li>
      </ul>
    </div>
  </nav>

  <main>
    <!-- Hero, Content, Footer -->
  </main>
</body>
</html>

Three Meta Tags You Should Never Delete

charset, viewport, and title are the core of the template. charset="UTF-8" prevents garbled text with emoji and special characters; viewport controls how the page scales on phones, and without it mobile reading quickly becomes painful; title shows up in both the browser tab and search results, making it the first factor in click-through rate. These three should stay even when everything else is trimmed.

I once took over a campaign page that looked fine on desktop but squeezed into a single screen on mobile, with the text scaled up to double size and every line requiring horizontal scrolling. The cause was a single missing line: no viewport in the <head>. Adding content="width=device-width,initial-scale=1" fixed the layout instantly. Such problems are invisible in desktop browsers and easy to miss in testing, so include these three lines from day one rather than discovering them through user complaints after launch.

Search Engines and Share Cards

description has limited direct impact on rankings, but search engines frequently use it as the snippet — a clear description containing your keywords measurably improves CTR. og:title and og:description belong to the Open Graph protocol and control what shows when content is shared to WeChat, Telegram, Slack, and similar platforms. For a more professional share image, add og:image at a 1.91:1 ratio and keep it under 300KB.

Why Semantic Structure Matters

Wrapping navigation in nav, main content in main, and the footer in footer is not just about tidy code. Screen readers rely on these tags so visually impaired users can skip repeated navigation; search engines rely on them to understand the page skeleton; browser dev tools highlight regions based on them. A common mistake is building everything with plain div elements, which makes retrofitting semantics later expensive. Start with semantic structure from the beginning.

Heading Hierarchy and Reading Order

Headings do more than set visual size; they carry structural weight. A page should normally have exactly one h1 for the topic, h2 for sections, h3 for subsections, and so on. Skipping levels (jumping from h1 straight to h4) is unfriendly to both screen readers and search engines, which build a page outline from the heading tree. On a content site, reserve h1 for the real page title and put the brand logo inside nav instead of wrapping it in an h1, so the logo never hijacks the heading hierarchy.

The lang attribute on <html lang="en"> matters too: it drives screen-reader pronunciation, the browser's translation suggestions, and how search engines understand the language of the page. On bilingual sites, forgetting to update lang after switching languages is one of the most common low-level mistakes I see.

A Complete Scenario: Building a Blog Homepage from Scratch

Putting the pieces together, a blog homepage skeleton looks roughly like this:

<body>
  <a class="skip-link" href="#main">Skip to main content</a>
  <header>
    <nav aria-label="Main navigation">
      <a href="/" class="logo">My Blog</a>
      <ul>
        <li><a href="/articles">Articles</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>
  <main id="main">
    <article>
      <h1>Rewriting an Old Site with HTML5 Semantic Tags</h1>
      <p>Body text…</p>
    </article>
  </main>
  <footer>© 2026 My Blog</footer>
</body>

Four details here are easy to overlook but used every day: skip-link lets keyboard users jump past repeated navigation in one keystroke; aria-label names a navigation that has no visible text; article wraps a single piece of content so readers and extractors can isolate it; and h1 appears exactly once. None of these is decoration — they are the practical foundation for accessibility and semantics.

Quick Reference for Extending

Scenario Tags to Add
Multilingual site <link rel="alternate" hreflang="en-us" href="...">
Blog / article page article semantics, og:type="article"
E-commerce landing page JSON-LD structured data, og:type="product"
Image-heavy page <link rel="preload" href="hero.webp" as="image">
Dark mode support <meta name="color-scheme" content="light dark">

Scripts and Resources: Two Details

In <script src="app.js" defer></script>, defer runs the script after the document is parsed so it never blocks first paint; preload tells the browser to fetch critical resources early. One team cut a landing page's LCP from 2.8s to 1.4s by merging three carousel images into one and adding preload — the meaning of such metrics is covered in the Core Web Vitals optimization guide, and the full layout checklist is in the responsive layout checklist.

Pre-Launch Checklist

  • Exactly one h1 per page, no skipped heading levels
  • charset, viewport, title, and description all present
  • lang matches the page's actual language
  • Navigation, main content, and footer use semantic tags
  • Critical resources use preload; scripts carry defer
  • og:title, og:description, and og:image are set
  • favicon, robots.txt, and sitemap are in place

Frequently Asked Questions

  • Do I need a favicon? Yes. Even a single line like <link rel="icon" type="image/svg+xml" href="/favicon.svg"> prevents a browser 404 request and makes the tab recognizable.
  • Must og:image be exactly 1.91:1? That is the common ratio for WeChat, Facebook, and similar share cards. It is not a hard rule, but designing to it prevents the share preview from being cropped.
  • Can I use only div? For a simple landing page, yes; but for articles, navigation, and forms, use semantic tags — the retrofit cost is much lower.
  • Is this template production-ready? It is a solid starting point, but before launch add a privacy notice, robots.txt, and a sitemap. See the robots.txt configuration guide for details.

References

Reference: WHATWG HTML Standard https://html.spec.whatwg.org/multipage/
Reference: MDN Getting started with HTML https://developer.mozilla.org/en-US/docs/Learn/HTML
Reference: MDN viewport meta tag https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
Reference: The Open Graph protocol https://ogp.me/