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