HTML语义化布局要求使用header、nav、main、article、aside、footer等标签替代div，提升可读性、SEO和无障碍访问；DOCTYPE必须首行且无前置字符，lang属性须为zh-CN等标准格式，main标签每页唯一且不可被其他区域标签包裹。

DOCTYPE 和 lang 属性必须出现在第一行

不写或写错 <!DOCTYPE html>，浏览器会退回到怪异模式（Quirks Mode），导致 CSS 布局错乱、flex 失效、box-sizing 行为异常——尤其在 IE 或旧版 Safari 中表现明显。lang 属性缺失会让屏幕阅读器无法正确切换语音语种，lang="zh-CN" 不能简写成 lang="cn" 或 lang="zh"，IANA 注册标准只认 zh-CN、zh-TW 等具体变体。

• <!DOCTYPE html> 必须是文档最开头的字符，前面不能有空格、BOM 或注释
• <html lang="zh-CN"> 要紧随 DOCTYPE，不能漏掉，也不能放在 <head> 里
• 如果页面含多语言内容（如中英混排段落），应在局部用 lang 覆盖，比如 <span lang="en">API</span>

head 里只放元信息，不塞样式或脚本逻辑

常见错误是把 <style> 写在 <body> 开头，或把初始化 JS 放进 <head> 里同步执行——这会阻塞渲染，用户看到白屏时间变长。真正该进 <head> 的只有三类东西：字符集声明、视口设置、页面元数据。

• <meta charset="UTF-8"> 必须是 <head> 中第一个 meta 标签，否则可能被浏览器忽略
• <meta name="viewport" content="width=device-width, initial-scale=1.0"> 是响应式基础，漏掉会导致移动端字体过小或横向滚动
• <title> 必须存在且唯一，SEO 和浏览器标签页都依赖它；<link rel="stylesheet"> 可以放这里，但 <script> 除非加 defer 或 async，否则别放

body 用语义化标签分层，而不是堆 div

看到 <div class="header">、<div class="main">、<div class="footer"> 这种写法，基本可以判定结构没过关。HTML5 语义标签不是“可选装饰”，而是浏览器、搜索引擎和辅助技术识别内容意图的唯一可靠信号。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• <header> 不等于“顶部栏”——它表示一个区块的头部，可以嵌套在 <article> 或 <section> 内部
• <main> 在整个文档中只能出现一次，且不能被 <article>、<aside>、<nav>、<footer> 包裹
• <nav> 专指导航链接集合，纯按钮组或筛选控件不属于它；<aside> 应与邻近内容弱相关（如博客侧边推荐），不是所有“右边栏”都该用它

嵌套必须合法，不能靠 CSS 强撑结构

浏览器对 HTML 嵌套有硬性校验：比如 <p> 里不能直接放 <div>，<h1> 到 <h6> 必须按逻辑层级递进，<ul> 子元素只能是 <li>。这些规则不是“写法洁癖”，而是 DOM 构建时的解析约束——非法嵌套会导致部分节点被浏览器自动修正甚至丢弃。

立即学习“前端免费学习笔记（深入）”；

• 检查工具如 W3C Validator 会直接报错 Element div not allowed as child of element p
• 标题层级断裂（比如跳过 <h2> 直接用 <h4>）会影响屏幕阅读器导航和 SEO 权重分配
• 表单控件必须用 <label> 显式关联，for 和 id 匹配，不能只靠视觉位置或 CSS 模拟

真实项目里最容易被忽略的，其实是 <main> 的唯一性和 lang 的精确取值——它们不报错，但一上线就影响可访问性审计和搜索引擎抓取质量。