html文档结构是影响渲染、seo、无障碍和可维护性的底层契约；doctype必须为以避免怪异模式，需设lang属性，语义化标签不可滥用，须置于最前。
HTML文档结构不是“写对就行”的形式规范，而是直接影响渲染行为、SEO权重、屏幕阅读器识别和长期可维护性的底层契约。现代浏览器对的解析偏差、<code>缺失lang属性、或误用<div>替代语义化标签，都会在生产环境里悄悄引发问题。<h3>DOCTYPE声明为什么必须是<code>
旧项目里常见或XHTML变体，这些会触发浏览器的怪异模式（Quirks Mode），导致盒模型计算错误、<code>getBoundingClientRect()返回值异常、甚至Flex布局失效。HTML5的是唯一被所有现代浏览器识别为标准模式（Standards Mode）的声明，它不指向任何外部DTD文件，也不做版本校验——只起开关作用。
容易踩的坑：
- 复制粘贴时漏掉
!，写成<doctype html></doctype>→ 浏览器完全忽略，退化为怪异模式 - 在模板引擎中用变量拼接DOCTYPE，比如
但变量为空 → 同样无声明 - 某些CMS导出HTML时自动插入过时DOCTYPE → 需检查生成结果而非源码
lang属性不是可选项
没有lang属性的，会让屏幕阅读器按系统默认语言朗读页面，中文内容可能被读成英文音调；搜索引擎也会降低该页在目标语言区域的排名权重。W3C明确要求：若页面主语言为简体中文，应写；繁体用zh-TW；多语言站点可用lang配合hreflang做精准标注。
注意点：
-
lang必须写在上，子元素的lang仅覆盖局部，不能替代根声明 - 不要写
lang="zh"这种泛化值，zh-CN和zh-SG在标点、用词上有差异，需匹配实际内容 - 服务端渲染时，若语言由请求头
Accept-Language动态决定，lang值必须同步注入，不能靠JS后期补
HTML5语义化标签替代<div>不是为了“好看”，而是绕过DOM树膨胀<p>一个典型的老式结构：<code><div id="header"></div>
<div class="nav"></div>
<div class="main"></div>，在无障碍测试工具中会被识别为“无结构内容”。而<header></header>、<nav></nav>、<main></main>等标签自带隐式ARIA角色（如role="banner"），无需额外加aria-label就能被读屏软件正确归类。
但要注意兼容性现实：
- IE8及更早版本不识别这些标签，需用
document.createElement('header')脚本垫片，或引入html5shiv -
<main></main>只能出现一次，重复会导致辅助技术跳过后续内容 -
<section></section>和<article></article>不是视觉容器，它们表达的是内容层级关系：一个<section></section>应有标题（<h2></h2>~<h6></h6>），否则语义断裂
<meta charset>必须放在最前
<meta charset="UTF-8">的位置影响整个的解析。如果它不在开头（比如前面有<title></title>或注释），部分浏览器会先用默认编码（如ISO-8859-1）解析后续标签，导致中文<title></title>乱码、<style></style>里中文注释解析失败，甚至CSS选择器含中文时样式不生效。
实操建议：
- 把
<meta charset="UTF-8">作为第一个子节点，后面紧跟<title></title> - 避免在
<meta charset>前放任何非空白字符，包括HTML注释<!-- --> - 构建工具（如Webpack、Vite）生成的HTML，需确认插件未在charset前注入额外代码
真正难的不是记住这些规则，而是在团队协作中守住底线：比如CI流程里加入HTML验证（用html-validate），或在模板系统中把和<meta charset>做成不可删减的骨架。一旦结构松动，后续所有优化都建立在流沙之上。
