main必须唯一且不能嵌套在article或section内，因其代表页面唯一核心内容，重复或嵌套会导致屏幕阅读器跳过、SEO降权；它须为body直接子元素，内部可含article/section，但不可被其他语义标签包裹。
HTML结构不是“先写完再套样式”的草稿纸，而是页面性能、可访问性和长期可维护性的第一道防线。结构错了，后续所有优化都打折扣。
为什么只能出现一次，且不能嵌套在或里
浏览器和辅助技术把 main 当作整个文档的“唯一内容主干”。重复或嵌套会破坏语义逻辑，导致屏幕阅读器跳过部分内容，搜索引擎也可能降权。
-
main必须直接子元素是article、section或普通段落，不能包裹在另一个section内部 - 如果页面有多个“主体区块”（比如首页的“最新文章”+“热门推荐”），它们应并列放在
main下，各自用section包裹，而不是给每个 section 套一个main - 某些 CMS 模板会自动生成多个
main，需手动检查并合并——这是上线前必做的语义审计项
header 和 nav 的使用边界在哪
header 不是“带标题的容器”，nav 也不是“一堆链接的盒子”。误用会导致导航被忽略、结构层级混乱。
- 页面级
header只能有一个，且应包含站点标识（如 logo）和全局导航；但每个article或section可以有自己的header（含该模块标题、作者、时间） -
nav必须包裹真正用于页面跳转的链接集合，侧边栏的操作按钮（如“编辑”“分享”）、表单内按钮、页脚链接列表都不算导航，不该用nav - 常见错误：
<div class="nav">代替<nav>—— 这类 class 名既没语义，又让键盘用户无法通过Tab直接聚焦到导航区域
aside 和 section 的区分关键看“是否可独立分发”
很多开发者凭视觉判断用哪个标签，结果把广告位、登录框塞进 aside，反而干扰了语义解析。
立即学习“前端免费学习笔记（深入）”；
-
aside内容必须与主内容相关但非核心，比如博客正文旁的“本文作者简介”或“同类文章推荐”；纯广告、无关外链、通用工具栏应改用section或无语义容器 -
section是逻辑分组，不强调独立性；article才要求可独立订阅、转发、RSS 抓取。一个产品介绍页里的“参数对比表”适合section，而其中每条用户评价就是独立的article - 如果某个区块没有标题（
h2或更高），大概率不该用section—— 它需要明确的主题锚点
meta charset 放错位置会直接导致中文乱码
<meta charset="utf-8"> 不是可有可无的装饰项，它必须在 <head> 最前面（<title> 之前），否则浏览器可能已按默认编码解析了部分 HTML。
- 实际现象：中文字符显示为 ，emoji 渲染失败，表单提交后后端收到乱码字符串
- Chrome DevTools 的 Network → Response Headers 里能看到实际使用的编码，若不是 utf-8，基本就是
meta位置错了 - 现代构建工具（如 Vite、Webpack）通常自动注入，但手写 HTML 或服务端模板（如 EJS、PHP）中仍需人工校验顺序
最常被忽略的不是标签怎么选，而是“这个标签是否真有必要存在”。删掉一个没语义的 div，比加十个新 class 更影响性能和可读性。
