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