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