time标签必须加datetime属性才有效，其值须为ISO 8601格式（如2026-04-11或2026-04-11T11:23），仅文本内容无机器可读语义。
真正该用、能放心用的 HTML5 新增语义标签就 7 个：header、nav、main、article、section、aside、footer。其余多数要么语义模糊、浏览器支持弱，要么在真实项目里反而增加协作成本。
哪些标签必须加 datetime 才算有效
time 标签不带 datetime 属性等于没写——屏幕阅读器和搜索引擎只认 ISO 8601 格式的时间字符串，比如 2026-04-11T11:23 或 2026-04-11。
- 只写
<time>2026年4月</time>：纯文本，无机器可读时间语义 - 正确写法是
<time datetime="2026-04-11">2026年4月</time> -
datetime值必须合法，"2026-04-xx"或"2026/04/11"都会失效
article 和 section 到底怎么分
区分点不在内容长短，而在「能否独立存在」：article 是能单独被 RSS 抓取、转发、重用的内容单元；section 是依赖上下文的逻辑分组。
-
article示例：博客正文、新闻条目、用户评论（含回复） -
section示例：「产品特性」「客户评价」「技术参数」——这些标题下没h2~h6就不该用section - 乱用
section会导致屏幕阅读器多出一堆无意义层级，比用div还糟
IE9–IE11 下怎么让新标签正常渲染
IE9 把 header、nav 等当行内元素，IE11 不识别 main 的语义；光靠 CSS display: block 不够，还得补 DOM 注册 + ARIA。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 必须在
<head>里尽早执行注册脚本：document.createElement('header') - 所有新标签都要显式声明
display: block，不能只靠继承 -
main在 IE11 及以下必须加role="main"，否则屏幕阅读器直接跳过
mark 不是「加粗高亮」，而是「搜索命中高亮」
mark 的语义非常窄：它只用于标记页面中已存在的文本里被搜索匹配到的部分，不是通用强调工具。
- ✅ 正确：
<p>这篇文章讲了 <mark>HTML5</mark> 新特性</p>（用户搜“HTML5”时自动高亮） - ❌ 错误：
<p>重点是 <mark>语义化</mark> 而非样式</p>（这里该用strong） - 滥用
mark会让辅助技术误判内容重点，干扰阅读流
最常被忽略的是结构嵌套规则：main 必须是顶层容器，不能包在 section 或 article 里；多个 nav 必须配 aria-label 区分用途；section 没邻近标题就别硬上——语义标签不是装饰，是给机器读的契约。
