<article>不可替换为<section>或<div>，因其专指可独立分发的内容单元（如新闻、快讯），能被RSS抓取、搜索引擎独立索引；<section>仅表主题分组，<div>无语义，误用将导致SEO降权、屏幕阅读器跳过及结构解析失败。

资讯类网站必须用语义化标签，否则 SEO 掉量、屏幕阅读器卡死、维护成本翻倍——这不是建议，是上线前的硬性检查项。

为什么 <article> 不能替换成 <section> 或 <div>

资讯页面的核心是“可独立分发的内容单元”，比如一篇新闻、一条快讯、一个专题卡片。<article> 的语义明确告诉浏览器和搜索引擎：这段内容有完整上下文，能单独被 RSS 订阅、被社交平台抓取、被搜索引擎作为独立结果索引。

• <section> 只表示“主题性分组”，不承诺独立性；同一 <section> 下放 5 条新闻，搜索引擎可能只当一个区块处理
• <div> 完全无语义，爬虫无法区分这是广告位、推荐栏还是正文
• 错误示例：<div class="news-item"><h3>台风预警</h3><p>…</p></div> —— 机器读不出这是新闻
• 正确写法：<article><header><h2>台风预警</h2><time datetime="2026-08-25">今天</time></header><p>…</p></article>

<nav> 和 <aside> 在资讯页的分工边界

资讯站常混用这两个标签：把“相关推荐”塞进 <nav>，或把“频道导航”丢进 <aside>。这会导致辅助技术误判用户意图。

• <nav> 只用于**主导航路径**：首页、国内、国际、财经、科技等一级频道入口；二级分类（如“科技→AI”）也适用
• <aside> 必须是**与当前内容弱关联的辅助信息**：右侧“同类新闻”“编辑推荐”“广告位”“作者简介”——它不能替代主内容流
• 常见错误：<nav><h3>热门标签</h3><a>AI</a><a>新能源</a></nav> —— 标签云不是导航，应改用 <aside> + <ul>
• 性能提示：部分旧版 IE 不识别 <nav>，但不影响渲染；关键是别让 JS 依赖 document.querySelector('nav') 去找非导航元素

时间信息必须用 <time>，且 datetime 属性不可省略

资讯类页面的时间不是装饰文字，而是结构化数据的关键字段。搜索引擎靠 <time datetime="..."> 判断内容时效性，决定是否在“最新”结果中置顶。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

• 错误写法：<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> 不负责格式化显示，样式由 CSS 控制；它的唯一职责是提供机器可读的时间戳

嵌套层级里最容易漏掉的三个细节

资讯页结构看似简单，但嵌套时极易破坏语义完整性。以下三点在 Code Review 中高频被退回：

• 每个 <article> 内部必须有标题（<h1>–<h6>），哪怕视觉上隐藏；没有标题的 <article> 会被屏幕阅读器跳过
• <main> 应包裹所有主体内容流，但不要把页脚版权、全局搜索框塞进去；它们属于 <header> 或 <footer>
• <aside> 如果出现在 <article> 内部（如“本文数据来源”模块），它就只服务该文章；若放在 <main> 外，则服务整页

语义化不是加几个新标签就完事，而是让每个标签都承担不可替代的结构角色——少一个，机器就少理解一层；错一个，整个内容链就断一环。