HTML5新标签需按语义正确使用：article适用于可独立分发的内容，time的datetime须符合ISO 8601格式，main页面仅限一次，section必须含标题。
HTML5 新标签不是“用了就高级”，而是“该用时才用”——语义错误比不用更伤 SEO 和可访问性。
怎么判断一个标签该不该用 <article></article> 而不是 <div>
<p>关键看内容是否能独立分发、复用或被聚合（比如 RSS 订阅）。博客正文、新闻条目、论坛帖子适合 <code><article></article>；侧边栏推荐、页脚版权栏、纯样式容器则不该用。
- 误用现象：
<article></article> 套着整个首页布局，导致屏幕阅读器反复播报“文章开始/结束”
- 浏览器不报错，但会破坏文档大纲（
document-outline），影响 h1~h6 层级逻辑
- SEO 工具（如 Lighthouse）会警告“语义化缺失”，但不会直接扣分——真正影响的是结构化数据解析
<time></time> 的 datetime 属性为什么经常写错
<article></article> 套着整个首页布局，导致屏幕阅读器反复播报“文章开始/结束”document-outline），影响 h1~h6 层级逻辑<time></time> 的 datetime 属性为什么经常写错它只接受特定格式的机器可读时间，不是随便填个“2024年3月”就能用。浏览器靠这个生成时间戳、排序、日历集成，填错等于没填。
- 正确写法：
<time datetime="2024-03-15">3月15日</time>或<time datetime="2024-03-15T14:30">下午2:30</time> - 常见错误：用中文“2024年03月15日”、空格分隔“2024-03-15 14:30”、漏掉
T（ISO 8601 要求） - 不写
datetime属性时，<time></time>仅是普通内联元素，无语义价值
为什么 <main></main> 页面里只能出现一次
它是 WAI-ARIA 定义的“主内容区域”地标（landmark），辅助技术靠它快速跳转。重复会导致焦点混乱，尤其对键盘用户和读屏软件。
立即学习“前端免费学习笔记（深入）”；
- 典型踩坑：在 SPA 中多个路由组件都渲染了
<main></main>，实际 DOM 里出现多个 - Vue/React 项目需确保只在根级布局或路由出口处包裹一次，子组件禁用
<main></main> - 浏览器开发者工具的“Accessibility”面板能直接检测重复 landmark，比手动查 HTML 更可靠
最常被忽略的其实是 <section></section> 和 <div> 的边界——它必须有主题性标题（<code>h2~h6），否则就是滥用。没有标题的“分区”，老老实实用 <div>。</div>
