html标签是浏览器解析、seo识别和无障碍访问的核心指令，必须严格遵循语义规范；lang属性须精确声明如zh-cn；head中标签直接影响首屏性能；语义化标签承载dom结构契约与信息架构责任。
HTML 标签不是装饰品，也不是“写完能显示就行”的占位符——它是浏览器解析内容的指令集，是搜索引擎理解页面意图的语法，更是屏幕阅读器为视障用户构建信息路径的坐标系。不按规范组织结构，<h1></h1> 乱用、<main></main> 缺失、<nav></nav> 套在无关区块里，轻则 SEO 掉权，重则无障碍测试直接失败。
为什么
很多项目上线后才发现多语言切换失效、语音朗读腔调怪异、甚至部分翻译插件无法识别语种——根源常在根元素漏掉 lang 属性。浏览器和辅助技术依赖它做字体回退、断字规则、语音合成音调选择。中文站点必须显式声明 lang="zh-CN"（不是 zh 或空值），否则会默认按英文处理标点间距与语音节奏。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
lang必须精确到区域码，如港澳用zh-HK，台湾用zh-TW - 嵌套内容若切换语言，需在子元素上覆盖，例如一段英文引文：
<blockquote lang="en">...</blockquote> - 服务端渲染时若动态生成
，务必同步注入正确lang值，不能靠 JS 后补
很多人以为 只是放 <title></title> 和 <meta> 的“收纳盒”，其实它直接参与资源加载调度。浏览器一旦开始解析 ，就会启动 DNS 预解析、预连接、资源预加载等关键链路。
-
<meta name="viewport">缺失或写错（如initial-scale=0），移动端页面直接缩成一团，且无法手动放大 -
<link rel="preload">若指向未使用的字体或大图，反而抢占带宽，拖慢关键 CSS 加载 -
<script></script>没加defer或async，会阻塞 HTML 解析，导致内容延迟数秒才出现 -
<meta charset="UTF-8">必须在前 1024 字节内，否则可能触发浏览器重排版（reparse）
语义化标签不是“换词游戏”，而是 DOM 结构契约
把 <div class="header"> 改成 <code><header></header> 看似只是字符替换，实际改变了浏览器内置的 ARIA role、键盘焦点流、以及 DevTools 中的节点可访问性树。更关键的是：现代 CSS 选择器（如 :has(<aside>)</aside>）和 JS API（如 document.querySelector('main')）都依赖这个结构契约。
-
<main></main>在整个文档中只能出现一次，且不能嵌套在<article></article>或<section></section>内——否则屏幕阅读器会跳过它 -
<section></section>必须有可见标题（<h2></h2>~<h6></h6>），否则会被视为无意义分组，部分爬虫直接忽略 -
<nav></nav>应包裹主导航链接，但面包屑导航、页脚链接列表不属于<nav></nav>范畴，该用<ol></ol>+aria-label -
<article></article>是自包含、可独立分发的内容单元（如博客正文、新闻稿），不是所有“看起来像文章”的区块都适用
真正难的不是记住每个标签怎么写，而是判断某个区块在信息架构中“到底是什么角色”。比如一个商品卡片，它是否具备独立 URL？能否被 RSS 订阅？是否需要出现在搜索结果摘要里？这些业务逻辑问题，才是决定该用 <article></article> 还是 <section></section> 的关键。结构不是前端工程师单方面定义的，它得和产品、内容、SEO 团队对齐。
