必须用<article>包每条新闻，因其向搜索引擎和读屏软件明确标识“独立可分发的新闻”，避免SEO降权、读屏卡顿及JSON-LD手动补全字段；<time>的datetime须为ISO 8601格式（如2026-05-19T11:52:00+08:00），分页须用<nav aria-label="新闻列表分页">，<main>须直接包裹所有<article>且仅有一个。
新闻列表页不能用 <ul> 或一堆 <div> 堆出来——否则 SEO 掉档、读屏器卡死、后续加结构化数据要重写。
为什么必须用 <article> 包每条新闻
搜索引擎和读屏软件靠 <article> 识别“这是一条独立可分发的新闻”。用 <div class="news-item"> 看似能显示，实际导致三个硬伤：
- Google Search Console 可能报
NewsArticle类型缺失，新闻类索引优先级下降 - 视障用户按
article键跳转时，会落在空<div>上，无法定位下一条 - 后续加 JSON-LD 时，
<article>能自动映射@type: "NewsArticle"；<div>得手动补全datePublished、headline、description全字段
<time> 的 datetime 属性怎么写才不被搜索引擎判无效
<time> 不是摆设，它的 datetime 必须是机器可解析的 ISO 8601 格式，否则 Google 会当时间不存在：
- ✅ 正确：
<time datetime="2026-05-19T11:52:00+08:00">5月19日 11:52</time> - ❌ 错误：
<time datetime="5月19日">5月19日</time>（含中文字符） - ❌ 错误：
<time datetime="05-19">5月19日</time>（缺年份、缺时分秒、无时区）
更新时间若需标注，额外加 itemprop="dateModified"（配合 Schema.org 使用）。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
分页控件必须用 <nav aria-label="新闻列表分页">
分页不是装饰，它是独立导航单元。用 <p> 或裸 <div> 包“上一页/下一页”，会导致：
- 读屏器无法识别这是分页区域，用户得逐字扫完所有文字才能发现链接
- 辅助技术无法提供“跳过分页”快捷键，破坏浏览流
- SEO 工具可能忽略分页语义，影响爬虫对列表深度的理解
正确写法示例：
<nav aria-label="新闻列表分页"> <a href="/news?page=1" aria-current="page">1</a> <a href="/news?page=2">2</a> <a href="/news?page=3">3</a> <a href="/news?page=4">下一页</a> </nav>
<main> 必须直接包裹所有 <article>，且只能有一个
<main> 是页面主体容器，不是样式盒子。常见错误是把它塞进 <section> 或嵌套在 <div> 里：
- ❌ 错误：
<div><main><article>...</article></main></div> - ✅ 正确：
<main><article>...</article><article>...</article></main>
一旦嵌套，部分屏幕阅读器可能完全跳过 <main> 内容；Google 也可能降低该区域的内容权重。这个限制不显眼，但修复成本最高——往往要动整页骨架。
