HTML 必须添加 lang 属性以确保屏幕阅读器准确发音和搜索引擎识别语种，中文页面应写为 <html lang="zh-CN">；<meta charset="UTF-8"> 必须是 <head> 中首个非注释标签，其后依次为 viewport、title 和外部资源；<body> 应用语义化容器包裹首屏内容，且仅有一个不嵌套的 <main>；标题层级须严格递进，不可跳跃或回退，语义由标签名决定而非 CSS 样式。
为什么 <html> 必须带 lang 属性
不加 lang 会让屏幕阅读器无法准确发音，搜索引擎也难判断内容语种。中文页面必须写成 <html lang="zh-CN">，不能只写 zh 或留空。部分老旧 CMS 生成的页面会漏掉这个属性，上线前要人工检查。
<head> 里哪些标签顺序不能错
<meta charset="UTF-8"> 必须是 <head> 中第一个非注释标签，否则浏览器可能用错误编码解析后续内容，导致标题乱码、CSS 路径失效。紧接着应是 <meta name="viewport">，再之后才是 <title> 和外部资源引用。把 <title> 放在 <meta charset> 前面，某些低版本 Android WebView 会忽略字符集声明。
<body> 开头直接放内容？别急
现代页面几乎都该用语义化容器包裹首屏内容，比如 <header>、<main> 或至少一个 <div>。直接把 <h1> 或 <p> 扔进 <body> 顶层，虽能渲染，但会削弱辅助技术对内容区域的识别能力。特别注意：一个页面只能有一个 <main>，且不能嵌套在 <article>、<aside> 或 <nav> 内部。
<h1> 到 <h6> 的层级断裂很常见
实际项目中常出现 <h2> 后直接跟 <h4>，跳过 <h3>；或在 <section> 内部重复使用 <h1>。这会让屏幕阅读器的标题导航失效，SEO 也会认为结构混乱。正确做法是：每个 <section> 或 <article> 内部从 <h2> 开始（除非它是唯一主标题），并严格保持递进，不跳跃、不回退。
立即学习“前端免费学习笔记（深入）”；
最容易被忽略的是：标题层级不是靠视觉大小决定的，而是靠标签本身语义。哪怕你用 CSS 把 <h6> 样式设得比 <h1> 还大，它在 DOM 结构里仍是最低级标题——辅助技术和爬虫只认标签名，不看样式。
