新闻列表页必须用包裹每条新闻、包裹整个列表区、和分别管理顶部导航与底部版权；仅用会导致语义缺失，损害SEO与屏幕阅读器体验。
直接说结论：新闻列表页必须用 <article></article> 包每条新闻，<main></main> 包整个列表区，<header></header> 和 <footer></footer> 分别管顶部导航和底部版权——不用这些标签，语义就残缺，SEO 和屏幕阅读器体验会明显打折。
为什么不能只用 <div> 套新闻？
<p>很多初学者把每条新闻写成 <code><div class="news-item">，看起来能跑，但实际埋了三个坑：
<ul>
<li>搜索引擎无法识别“这是一条独立可分发的新闻”，<code><article></article> 才是 HTML5 明确规定的自包含内容单元
article 键跳转时，会直接跳过整块列表，而不是卡在一堆无意义的 <div> 里
<li>未来加 RSS 输出或结构化数据（如 JSON-LD）时，<code><article></article> 能自动映射到 NewsArticle 类型，<div> 得手动补全所有字段
<h3>
<code><article></article> 里面该放什么？别漏掉 <time></time>
一条新闻不是标题+摘要就完事。HTML5 要求时间信息必须用 <time></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></time> 的 datetime 值必须是机器可读格式（ISO 8601），显示文字可以本地化；<figure></figure> 不是必须，但比裸 <img alt="HTML5结构标签在新闻网站怎么用_文章列表页结构设计【指南】" > 更语义清晰。
立即学习“前端免费学习笔记（深入）”；
<nav></nav> 放哪？别塞进 <header></header> 里凑数
常见错误是把主导航栏硬塞进 <header></header>，结果整个 <header></header> 变得又宽又重。正确做法是：
-
<header></header>只放站点级标识：logo、主站名、全局搜索框 -
<nav></nav>独立放在<header></header>下方，或作为<main></main>的兄弟元素——它属于“页面导航”，不是“页眉装饰” - 如果列表页有分页（如“上一页/下一页”），那个分页也该用
<nav aria-label="新闻列表分页"></nav>，别用<div> 或 <code><p></p>最易被忽略的一点：新闻列表页的
<main></main>必须且只能有一个，且不能嵌套在<article></article>或<section></section>内部——它是整个页面的主体容器，所有新闻<article></article>都得是它的直接子元素。否则，辅助技术可能完全跳过内容区域。
