不可替换为或，因其专指可独立分发的内容单元（如新闻、快讯），能被rss抓取、搜索引擎独立索引；仅表主题分组，无语义，误用将导致seo降权、屏幕阅读器跳过及结构解析失败。
资讯类网站必须用语义化标签，否则 SEO 掉量、屏幕阅读器卡死、维护成本翻倍——这不是建议，是上线前的硬性检查项。
为什么 <article></article> 不能替换成 <section></section> 或 <div>
<p>资讯页面的核心是“可独立分发的内容单元”，比如一篇新闻、一条快讯、一个专题卡片。<code><article></article> 的语义明确告诉浏览器和搜索引擎：这段内容有完整上下文，能单独被 RSS 订阅、被社交平台抓取、被搜索引擎作为独立结果索引。
-
<section></section> 只表示“主题性分组”，不承诺独立性；同一 <section></section> 下放 5 条新闻，搜索引擎可能只当一个区块处理
<div> 完全无语义，爬虫无法区分这是广告位、推荐栏还是正文
<li>错误示例：<code><div class="news-item">
<h3>台风预警</h3>
<p>…</p>
</div> —— 机器读不出这是新闻- 正确写法：
<article><header><h2>台风预警</h2>
<time datetime="2026-08-25">今天</time></header><p>…</p></article>
<nav></nav> 和 <aside></aside> 在资讯页的分工边界
资讯站常混用这两个标签：把“相关推荐”塞进 <nav></nav>，或把“频道导航”丢进 <aside></aside>。这会导致辅助技术误判用户意图。
html-to-pptx-converter
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
下载
-
<nav></nav> 只用于**主导航路径**：首页、国内、国际、财经、科技等一级频道入口；二级分类（如“科技→AI”）也适用
-
<aside></aside> 必须是**与当前内容弱关联的辅助信息**：右侧“同类新闻”“编辑推荐”“广告位”“作者简介”——它不能替代主内容流
- 常见错误：
<nav><h3>热门标签</h3>
<a>AI</a><a>新能源</a></nav> —— 标签云不是导航，应改用 <aside></aside> + <ul></ul>
- 性能提示：部分旧版 IE 不识别
<nav></nav>，但不影响渲染；关键是别让 JS 依赖 document.querySelector('nav') 去找非导航元素
时间信息必须用 <time></time>，且 datetime 属性不可省略
资讯类页面的时间不是装饰文字，而是结构化数据的关键字段。搜索引擎靠 <time datetime="..."></time> 判断内容时效性，决定是否在“最新”结果中置顶。
- 错误写法：
<p>发布时间：2026年8月25日</p> —— 机器无法提取结构化时间
- 正确写法：
<time datetime="2026-08-25T14:30:00+08:00">2026年8月25日 14:30</time>（ISO 8601 格式优先）
- 如果只有日期没有具体时间，仍需补全：
datetime="2026-08-25"，不能留空
- 注意：
<time></time> 不负责格式化显示，样式由 CSS 控制；它的唯一职责是提供机器可读的时间戳
嵌套层级里最容易漏掉的三个细节
资讯页结构看似简单，但嵌套时极易破坏语义完整性。以下三点在 Code Review 中高频被退回：
- 每个
<article></article> 内部必须有标题（<h1></h1>–<h6></h6>），哪怕视觉上隐藏；没有标题的 <article></article> 会被屏幕阅读器跳过
-
<main></main> 应包裹所有主体内容流，但不要把页脚版权、全局搜索框塞进去；它们属于 <header></header> 或 <footer></footer>
-
<aside></aside> 如果出现在 <article></article> 内部（如“本文数据来源”模块），它就只服务该文章；若放在 <main></main> 外，则服务整页
语义化不是加几个新标签就完事，而是让每个标签都承担不可替代的结构角色——少一个，机器就少理解一层；错一个，整个内容链就断一环。
<section></section> 只表示“主题性分组”，不承诺独立性；同一 <section></section> 下放 5 条新闻，搜索引擎可能只当一个区块处理<div> 完全无语义，爬虫无法区分这是广告位、推荐栏还是正文
<li>错误示例：<code><div class="news-item">
<h3>台风预警</h3>
<p>…</p>
</div> —— 机器读不出这是新闻<article><header><h2>台风预警</h2>
<time datetime="2026-08-25">今天</time></header><p>…</p></article>
<nav></nav> 和 <aside></aside> 在资讯页的分工边界
资讯站常混用这两个标签：把“相关推荐”塞进 <nav></nav>，或把“频道导航”丢进 <aside></aside>。这会导致辅助技术误判用户意图。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
<nav></nav>只用于**主导航路径**：首页、国内、国际、财经、科技等一级频道入口；二级分类（如“科技→AI”）也适用 -
<aside></aside>必须是**与当前内容弱关联的辅助信息**：右侧“同类新闻”“编辑推荐”“广告位”“作者简介”——它不能替代主内容流 - 常见错误：
<nav><h3>热门标签</h3> <a>AI</a><a>新能源</a></nav>—— 标签云不是导航，应改用<aside></aside>+<ul></ul> - 性能提示：部分旧版 IE 不识别
<nav></nav>，但不影响渲染；关键是别让 JS 依赖document.querySelector('nav')去找非导航元素
时间信息必须用 <time></time>，且 datetime 属性不可省略
资讯类页面的时间不是装饰文字，而是结构化数据的关键字段。搜索引擎靠 <time datetime="..."></time> 判断内容时效性，决定是否在“最新”结果中置顶。
- 错误写法：
<p>发布时间：2026年8月25日</p>—— 机器无法提取结构化时间 - 正确写法：
<time datetime="2026-08-25T14:30:00+08:00">2026年8月25日 14:30</time>（ISO 8601 格式优先） - 如果只有日期没有具体时间，仍需补全：
datetime="2026-08-25"，不能留空 - 注意：
<time></time>不负责格式化显示，样式由 CSS 控制；它的唯一职责是提供机器可读的时间戳
嵌套层级里最容易漏掉的三个细节
资讯页结构看似简单，但嵌套时极易破坏语义完整性。以下三点在 Code Review 中高频被退回：
- 每个
<article></article>内部必须有标题（<h1></h1>–<h6></h6>），哪怕视觉上隐藏；没有标题的<article></article>会被屏幕阅读器跳过 -
<main></main>应包裹所有主体内容流，但不要把页脚版权、全局搜索框塞进去；它们属于<header></header>或<footer></footer> -
<aside></aside>如果出现在<article></article>内部（如“本文数据来源”模块），它就只服务该文章；若放在<main></main>外，则服务整页
语义化不是加几个新标签就完事，而是让每个标签都承担不可替代的结构角色——少一个，机器就少理解一层；错一个，整个内容链就断一环。
