html5语义标签兼容性核心在于行为一致性而非可用性：ie9–11需html5shiv注册标签；需检测方法存在并降级；必须按窄到宽顺序书写；等纯语义标签无渲染问题但需注意样式与js健壮性。
IE11 及更早版本不识别 <article></article> 等语义化标签
这些标签在 IE8–IE11 中不会报错，但默认没有样式、不参与 CSS 选择器匹配（比如 article { margin: 1em; } 完全无效），DOM 树里存在，但浏览器当普通未知元素处理。
解决方法只有靠 document.createElement('article') 主动“注册”一次，或者引入 html5shiv 这类 polyfill。现代项目基本已弃用 IE，但若仍需兼容 IE9–11，必须加这一步，否则连基本布局都会错乱。
- 只对 IE9–11 有效；IE8 需额外启用
document.documentMode = 9或确保页面有<meta http-equiv="X-UA-Compatible" content="IE=9"> -
html5shiv必须在中、CSS 之前加载，否则样式会闪动或失效 - Vue/React 等框架生成的 DOM 不受此影响——它们操作的是 JS 对象，不是原生解析流程
<dialog></dialog> 在 Safari 和旧版 Chrome 中行为不一致
<dialog></dialog> 是 HTML5 后期加入的，Safari 直到 16.4 才支持 showModal()，且默认无 backdrop；Chrome 94+ 支持完整 API，但早期版本（如 80–93）仅支持 show()，调用 showModal() 会静默失败。
实际使用时不能只靠 typeof HTMLDialogElement !== 'undefined' 判断可用性，还要检测方法是否存在：
立即学习“前端免费学习笔记（深入）”；
功能列表：底层程序与前台页面分离的效果，对页面的修改无需改动任何程序代码。完善的标签系统，支持自定义标签，公用标签，快捷标签，动态标签，静态标签等等，支持标签内的vbs语法，原则上运用这些标签可以制作出任何想要的页面效果。兼容原来的栏目系统，可以很方便的插入一个栏目或者一个栏目组到页面的任何位置。底层模版解析程序具有非常高的效率，稳定性和容错性，即使模版中有错误的标签也不会影响页面的显示。所有的标
if ('showModal' in HTMLDialogElement.prototype) {
modal.showModal();
} else {
modal.show(); // 降级为非模态
}
- Firefox 一直未实现
<dialog></dialog>，至今（2024）仍需用dialog-polyfill -
backdropCSS 伪元素在 Safari 中不可交互（比如点击关闭），需手动监听click事件判断是否点在 backdrop 上 - 移动端 Safari 对
position: fixed内的<dialog></dialog>渲染异常，建议避免嵌套在 fixed 容器中
<picture></picture> + <source></source> 的 srcset 解析逻辑容易误判
浏览器按顺序解析 <source></source>，遇到第一个匹配条件就停止，后续不管是否更优。很多人写成先放 media="(min-width: 768px)"，再放 media="(min-width: 480px)"，结果小屏设备反而命中了大屏规则。
正确顺序必须从窄到宽、从高优先级到低优先级排列：
<picture> <source media="(max-width: 479px)" srcset="small.jpg"> <source media="(max-width: 767px)" srcset="medium.jpg"> @@##@@ </picture>
-
<img src="large.jpg" alt="...">是 fallback，必须存在且放在最后；没有它，不匹配任何<source></source>时会显示空白 - Safari 对
srcset中w描述符的支持晚于 Chrome/Firefox，iOS 16.4 前不支持1x, 2x, 3x混用w - 服务端渲染（SSR）时，
<picture></picture>不会触发预加载，首屏图片加载延迟比<img alt="html5中新增标签的兼容性如何" >明显
<time></time> 和 <mark></mark> 这类“纯语义”标签几乎无兼容性问题
它们不改变渲染行为，也不带默认样式，所有现代浏览器（包括 IE9+）都能正常解析和暴露 DOM 接口。你写 <time datetime="2023-01-01">昨天</time>，DOM 里就是个普通元素，JS 可读取 datetime 属性，无障碍工具能识别语义——但仅此而已。
真正容易出问题的是开发者自己加的样式或 JS 行为：
- 给
<mark></mark>设background: yellow，在深色模式下可能完全看不见，需配合@media (prefers-color-scheme: dark)调整 -
<time></time>的datetime值格式错误（如写成"2023/01/01"）会导致new Date(el.dateTime)返回Invalid Date，但浏览器不会报错 - 搜索引擎目前基本忽略这些标签的语义价值，别指望靠它们提升 SEO
