真正语义化标签是浏览器、搜索引擎和辅助技术能据此推断内容角色的原生元素，核心结构标签有<header><nav><main><section><article><aside><footer>，辅以<figure><time><mark><details>等关键标签。
哪些标签算真正的语义化元素
判断标准很简单：浏览器、屏幕阅读器或搜索引擎能直接通过标签名理解它的作用，而不是靠 class 名或上下文猜。像 div 和 span 不算——它们是通用容器，没含义；而 header、nav、main 这类才是。
必须记住的「结构级」语义标签有：header、nav、main、section、article、aside、footer。它们不是装饰，而是页面骨架的正式组成部分。
容易被忽略但同样关键的还有：figure + figcaption（图文组合）、time（带 datetime 属性的时间）、mark（高亮关键词）、details/summary（可展开内容）。这些不是“锦上添花”，在读屏工具或爬虫解析时会直接影响信息提取质量。
main 为什么只能用一次且不能嵌套
main 表示整个文档中唯一的核心内容区域。它不是“视觉上居中”的容器，而是逻辑上不可替代的主体。如果用了两次，屏幕阅读器会困惑哪部分才是真正该聚焦的；如果把它塞进 header 或 aside 里，等于告诉辅助技术“主内容藏在页眉里”——这违背语义本质。
立即学习“前端免费学习笔记（深入）”；
- 一个 HTML 文档中
main必须且只能出现一次 -
main不能是article、aside、footer、header、nav的子元素 - 它通常直接放在
body下，紧接在header之后（如果有） - 不要为了样式方便用
main包裹导航或侧边栏——那是nav和aside的事
section 和 article 到底怎么选
很多人把 section 当成“带标题的 div”，这是最常见误用。它必须满足两个硬条件：有明确主题 + 有对应标题（h2–h6）。没有标题的“分块”，用 div 更诚实。
article 要求更高：内容得能独立存在、被单独引用或重用。比如一篇博客正文、一条新闻、一个用户评论——复制出去发到 RSS 或邮件里依然成立。而产品列表页里的“热销商品”区块，只是页面一部分，没独立性，就该用 section。
-
article可以嵌套：比如一篇博客里引用另一篇，外层是article，内层也是 -
section不能替代article：即使加了h2，如果内容本身不具备自包含性，就不该用 - 不确定时先问自己：“这段内容去掉页面其他部分，还能讲清楚一件事吗？”能 →
article；不能 →section或div
老浏览器兼容和样式重置的实际处理方式
IE8 及更早版本不认识 header 等新标签，会当成未知元素，不渲染样式，也不构建 DOM 节点。但现代项目基本不用考虑 IE8 了，真正要留意的是：即使标签被识别，浏览器默认样式差异仍然存在。
比如 main 在 Chrome/Firefox 中默认无 margin/padding，但在 Safari 某些版本里可能有微小间距；aside 在部分 Android WebView 中会被当普通块级元素，但不会自动右浮动——别指望它替你做布局。
- 用
HTML5 Shiv已过时，除非还支持 IE8–9；现在只需确保doctype是<!DOCTYPE html> - 所有语义标签都需显式写 CSS：不要假设
nav会自动水平排列，aside会自动变窄 - 用
normalize.css或至少重置section、article等的display为block，避免某些旧版 Safari 渲染异常 - 语义 ≠ 布局：它们不提供栅格、Flex 或 Grid 能力，只是给结构贴标签
