html5语义化标签无新语法，核心差异在语义定义与使用约束：section/article须配标题，main仅能出现一次且不可嵌套于article/aside中，旧ie需css重置或html5shiv兜底。
HTML5 的语义化标签本身没有“新语法”——它们就是普通 HTML 元素，不改变 HTML 解析规则；所谓“变化”，其实是语义定义、使用约束和兼容处理上的实际差异，不是语法层面的新增（比如没有类似 if 或 for 这样的模板语法）。真正需要你动手调整的，是结构认知、嵌套逻辑和老浏览器兜底方式。
哪些标签必须配标题？<section></section> 和 <article></article> 的硬性要求
很多开发者把 <section></section> 当成“高级 <div>”随便用，结果被可访问性检测工具报错。W3C 明确要求：<code><section></section> 必须有标题（<h1></h1>–<h6></h6>），否则它就失去了“主题区块”的语义。同理，<article></article> 也应自带标题，且该内容需具备独立传播能力（比如能被 RSS 抓取或单独分享）。
-
<section></section>：适合“产品介绍”“用户评价”这类有明确主题但不独立成篇的区块 -
<article></article>：只用于可脱离当前页面存在的完整内容，如博客正文、新闻稿、评论条目 - 误用示例：
<section><p>这是一段说明文字</p></section>—— 缺少标题，语义失效
<main></main> 只能出现一次，且不能嵌套在 <article></article> 或 <aside></aside> 里
<main></main> 表示整个页面的唯一核心内容区，它的边界非常严格。一旦在 <article></article> 内部再写一个 <main></main>，就会破坏文档大纲层级，屏幕阅读器可能跳过或误读。
- ✅ 正确：
<main><article><h2>标题</h2> <p>正文</p></article></main> - ❌ 错误：
<article><main><h2>标题</h2></main></article> - 注意：
<main></main>不能作为<header></header>、<footer></footer>、<nav></nav>、<aside></aside>的子元素
IE9 及更早版本不识别语义标签，必须显式声明 display: block
哪怕加了 ，IE9 仍默认把 <code><header></header>、<nav></nav> 等当行内元素处理，导致样式崩坏（比如高度塌陷、浮动失效）。这不是 bug，是历史实现限制。
- 必须加 CSS 重置：
header, nav, main, article, section, aside, footer { display: block; } - 如果项目还需支持 IE8，得用
document.createElement()注册这些标签，或引入html5shiv.js - 现代项目（2023 年后）基本可忽略此问题，但团队若维护老系统，这个兜底步骤仍常被遗漏
最容易被忽略的其实是语义层级关系：比如 <nav></nav> 不一定非得在 <header></header> 里，它也可以放在 <aside></aside> 中作为侧边导航；而 <aside></aside> 也不只是“侧边栏”，它可以是文章内的术语注释块。语义不是位置决定的，是上下文决定的。
