新闻列表页必须用<article>包裹每条新闻、<main>包裹整个列表区、<header>和<footer>分别管理顶部导航与底部版权；仅用<div>会导致语义缺失，损害SEO与屏幕阅读器体验。
直接说结论：新闻列表页必须用 <article> 包每条新闻，<main> 包整个列表区，<header> 和 <footer> 分别管顶部导航和底部版权——不用这些标签，语义就残缺，SEO 和屏幕阅读器体验会明显打折。
为什么不能只用 <div> 套新闻？
很多初学者把每条新闻写成 <div class="news-item">，看起来能跑，但实际埋了三个坑：
-
搜索引擎无法识别“这是一条独立可分发的新闻”，
<article>才是 HTML5 明确规定的自包含内容单元 - 屏幕阅读器用户按
article键跳转时，会直接跳过整块列表，而不是卡在一堆无意义的<div>里 - 未来加 RSS 输出或结构化数据（如 JSON-LD）时，
<article>能自动映射到NewsArticle类型，<div>得手动补全所有字段
<article> 里面该放什么？别漏掉 <time>
一条新闻不是标题+摘要就完事。HTML5 要求时间信息必须用 <time> 标签包裹，并带 datetime 属性——否则发布时间只是普通文本，机器无法解析。
<article> <h2><a href="news-001.html">国产大飞机C919完成首次商业飞行</a></h2> <p class="summary">2026年1月4日，东航MU789航班从上海虹桥飞往北京首都…</p> <time datetime="2026-01-04T08:30:00+08:00">2026年1月4日 08:30</time> <figure><img src="c919.jpg" alt="C919客机起飞瞬间"></figure> </article>
注意：<time> 的 datetime 值必须是机器可读格式（ISO 8601），显示文字可以本地化；<figure> 不是必须，但比裸 <img> 更语义清晰。
立即学习“前端免费学习笔记（深入）”；
<nav> 放哪？别塞进 <header> 里凑数
常见错误是把主导航栏硬塞进 <header>，结果整个 <header> 变得又宽又重。正确做法是：
-
<header>只放站点级标识：logo、主站名、全局搜索框 -
<nav>独立放在<header>下方，或作为<main>的兄弟元素——它属于“页面导航”，不是“页眉装饰” - 如果列表页有分页（如“上一页/下一页”），那个分页也该用
<nav aria-label="新闻列表分页">，别用<div>或<p>
最易被忽略的一点：新闻列表页的 <main> 必须且只能有一个，且不能嵌套在 <article> 或 <section> 内部——它是整个页面的主体容器，所有新闻 <article> 都得是它的直接子元素。否则，辅助技术可能完全跳过内容区域。
