真正高频实用的HTML5语义标签是、、、、、、、（需datetime属性）、（仅限高亮已有文本），它们构成页面逻辑骨架，对SEO和无障碍有实质影响。
哪些HTML5标签真正在项目里用得上
别被“完整清单”骗了，实际开发中高频使用的语义标签就那么几个，其余多数要么浏览器支持弱，要么语义模糊、团队协作时反而增加理解成本。
真正值得投入时间掌握的，是那些能替代 <div class="header"> 这类写法、且主流浏览器（Chrome/Firefox/Safari/Edge 16+）已稳定支持的标签：
<ul>
<li>
<code><header></header>、<nav></nav>、<main></main>、<article></article>、<section></section>、<aside></aside>、<footer></footer> —— 它们构成页面逻辑骨架，对无障碍（a11y）和SEO有实质影响
<time></time> 必须带 datetime 属性才有意义，光写 <time>2024年</time> 不会被解析为机器可读时间<mark></mark> 仅用于高亮页面内已有文本（比如搜索结果关键词），不是通用“强调”工具，别拿来替代 <span class="highlight"></span>
用了语义标签，为什么屏幕阅读器还是读不对
语义标签本身不自动带来可访问性，关键在结构层级和 ARIA 配合是否合理。常见断点就卡在这儿：
- 嵌套错误：比如在
<article></article>外面没包<main></main>，或把<nav></nav>放进<footer></footer>里——阅读器依赖 DOM 结构推断上下文 - 缺少必要属性：例如
<nav aria-label="主导航"></nav>比裸写<nav></nav>更可靠，尤其当页面有多个<nav></nav>时 -
<section></section>不是万能分组容器：它必须有明确主题和标题（<h2></h2>~<h6></h6>），否则不如直接用<div> —— 乱用反而让阅读器多出无意义层级 <h3>IE8/9 项目里还能不能用这些新标签</h3> <p>能，但必须加一层兼容处理，否则老 IE 会忽略它们、不渲染样式、也不进 DOM 树。</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a> <p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur</p> </div> <a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p>最轻量方案是用 <code>document.createElement“注册”标签名（现代方案如 html5shiv 其实也干这事）：if (!document.createElement('header').canHaveChildren) { ['header','nav','section','article','aside','footer','main','time','mark'].forEach(function(tag) { document.createElement(tag); }); }注意两点：
- 这段脚本必须在
里尽早执行，早于任何新标签出现 -
<main></main>在 IE11 以下仍无原生语义支持，即使 DOM 存在，屏幕阅读器也识别不了，需额外加role="main"
为什么
<article></article>和<section></section>总分不清核心区别不在“内容长短”，而在“独立性”：
-
<article></article>内容要能单独分发、重用或聚合——比如博客正文、新闻条目、用户评论。它自带隐式大纲级别，可嵌套自身（如评论里的回复） -
<section></section>是主题分组，必须有标题，且内容不能脱离当前上下文存在——比如“产品特性”“客户评价”“技术参数”这些模块 - 一个常见误用：
<section></section>包着几个<article></article>是合理的；反过来，用<article></article>包着几个<section></section>也没问题；但用<article></article>当页面外层容器（如替代<main></main>）就错了——它不表示“主体内容”，只表示“一篇独立内容”
复杂点在于：同一段 HTML，在不同场景下语义可能切换。比如公司首页的“最新动态”区块，如果每条都是完整新闻稿，用
<article></article>；如果只是带标题的摘要链接列表，用<section></section>更准。这种判断没法靠工具检查，得看内容意图。 - 这段脚本必须在
