标准 HTML5 模板

每个网页的起点都是一段 HTML 骨架。它看起来简单，却决定了后续的语义、无障碍、SEO 和长期维护成本。下面这份模板可以直接复制使用，我会逐段说明每个标签存在的理由，以及什么情况下可以精简。

一段可直接使用的骨架

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>页面标题 · 品牌名</title>
  <meta name="description" content="页面描述">
  <meta property="og:title" content="分享标题">
  <meta property="og:description" content="分享描述">
  <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="/">首页</a></li>
      </ul>
    </div>
  </nav>

  <!-- 主要内容 -->
  <main>
    <!-- Hero, Content, Footer -->
  </main>
</body>
</html>

三行最不该删的 meta

charset、viewport 和 title 是模板里最核心的三行。charset="UTF-8" 保证中文、emoji 和特殊符号不会乱码；viewport 决定页面在手机上按正确比例缩放，缺少它移动端阅读体验会大打折扣；title 同时出现在浏览器标签页和搜索结果标题中，是点击率的第一个决定因素。这三行属于"不解释也应该保留"的部分。

我曾接手过一个活动页：桌面端一切正常，手机端打开后整个页面挤在一屏里，字号被系统放大到两倍，一行文字要左右拖动才能看完。原因就一句话——<head> 里少了 viewport。补上 content="width=device-width,initial-scale=1" 之后布局立刻恢复。这类问题在桌面浏览器上完全看不出差异，最容易漏过测试，所以从写模板的第一天起就把这三行带上，而不是等上线后靠用户投诉来发现。

搜索引擎与分享卡片

description 对排名的直接影响有限，但它经常被搜索引擎当作摘要展示，一段写得清楚、包含关键词的描述能明显提升点击率。og:title 和 og:description 属于 Open Graph 协议，决定内容分享到微信、Telegram、Slack 等平台时展示的标题与描述。想让分享图更专业，再补一行 og:image，建议图片比例 1.91:1、体积控制在 300KB 以内。

语义结构为什么重要

把导航放进 nav、主体放进 main、页脚放进 footer，不只是代码好看。屏幕阅读器依赖这些标签让视障用户跳过重复导航；搜索引擎依赖它们理解页面骨架；浏览器开发者工具也能据此高亮区块。常见误区是全程只用 div 堆砌，后期想补语义结构时改动面很大，建议一开始就按语义组织。

标题层级与阅读顺序

标题不只是在视觉上分大小，它还承担结构职责。一个页面通常只保留一个 h1，对应页面主题；章节用 h2，小节用 h3，依此类推。跳级使用（比如从 h1 直接跳到 h4）对屏幕阅读器和搜索引擎都不友好，它们依赖标题生成页面大纲。做内容站时，把 h1 留给真正的页面标题，品牌 Logo 放进 nav 而不是套上 h1，标题层级才不会被 Logo 占用。

<html lang="zh-CN"> 里的 lang 属性同样值得注意：它影响屏幕阅读器的发音、浏览器的翻译建议，以及搜索引擎对内容语言的理解。做双语站时，切换语言后忘了同步 lang，是我见过最常见的低级错误之一。

一个完整场景：从零搭一个博客首页

把上面的零件组合起来，一个博客首页的骨架大致是这样：

<body>
  <a class="skip-link" href="#main">跳到主要内容</a>
  <header>
    <nav aria-label="主导航">
      <a href="/" class="logo">我的博客</a>
      <ul>
        <li><a href="/articles">文章</a></li>
        <li><a href="/about">关于</a></li>
      </ul>
    </nav>
  </header>
  <main id="main">
    <article>
      <h1>用 HTML5 语义标签重写旧站</h1>
      <p>正文……</p>
    </article>
  </main>
  <footer>© 2026 我的博客</footer>
</body>

这里有四个平时容易忽略的细节：skip-link 让键盘用户一键跳过重复导航；aria-label 给没有可见文本的导航补充名称；article 包裹单篇内容，方便阅读器提取和分享；h1 全页只出现一次。它们都不是"炫技"，而是每天实际会用到的基础能力。

扩展对照表

场景	需要补充的标签
多语言站点	`<link rel="alternate" hreflang="en-us" href="...">`
博客 / 文章页	`article` 语义标签、`og:type="article"`
电商落地页	JSON-LD 结构化数据、`og:type="product"`
图片较多的页面	`<link rel="preload" href="hero.webp" as="image">`
需要暗色主题	`<meta name="color-scheme" content="light dark">`

关于脚本与资源的两个细节

模板末尾的 <script src="app.js" defer></script> 中，defer 让脚本在文档解析完成后再执行，不会阻塞首屏渲染；preload 则告诉浏览器提前下载关键资源。曾有一个团队为活动页做首屏优化，把三张轮播图合并成一张并加 preload，LCP 从 2.8 秒降到 1.4 秒——这类性能指标的意义可以参考Core Web Vitals 优化指南，完整的布局检查可以对照响应式布局检查清单。

上线前检查清单

全页只有一个 h1，标题层级不跳级
charset、viewport、title、description 四件套齐全
lang 与页面实际语言一致
导航、主体、页脚使用语义标签
关键资源加了 preload，脚本带 defer
已补充 og:title、og:description 与 og:image
添加 favicon、robots.txt 与 sitemap

常见问题

favicon 需要吗？ 需要。即使只有一行 <link rel="icon" type="image/svg+xml" href="/favicon.svg">，也能避免浏览器的 404 请求，并让标签页有辨识度。
og:image 一定要 1.91:1 吗？ 这是微信、Facebook 等平台分享图的常见比例，不是硬性规定，但按这个比例设计可以避免分享卡片被裁切。
能只用一个 div 吗？ 简单落地页可以，但涉及文章、导航、表单时建议使用语义标签，改造和维护成本都更低。
模板适合直接上线吗？ 适合作为起点，上线前建议补上隐私声明、robots.txt 和 sitemap，相关配置可参考robots.txt 配置指南。

参考

参考：HTML 规范（WHATWG）https://html.spec.whatwg.org/multipage/
参考：MDN HTML 入门 https://developer.mozilla.org/zh-CN/docs/Learn/HTML
参考：MDN viewport meta 标签 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Viewport_meta_tag
参考：Open Graph 协议 https://ogp.me/