HTML5结构标签在新闻网站怎么用_文章列表页结构设计【指南】

包每条新闻，

包整个列表区，

和 分别管顶部导航和底部版权——不用这些标签，语义就残缺，SEO 和屏幕阅读器体验会明显打折。

为什么不能只用 套新闻？

很多初学者把每条新闻写成 ，看起来能跑，但实际埋了三个坑：

• 搜索引擎无法识别“这是一条独立可分发的新闻”， 才是 HTML5 明确规定的自包含内容单元
• 屏幕阅读器用户按 article 键跳转时，会直接跳过整块列表，而不是卡在一堆无意义的 里
• 未来加 RSS 输出或结构化数据（如 JSON-LD）时， 能自动映射到 NewsArticle 类型， 得手动补全所有字段

  里面该放什么？别漏掉

  一条新闻不是标题+摘要就完事。HTML5 要求时间信息必须用 标签包裹，并带 datetime 属性——否则发布时间只是普通文本，机器无法解析。

    
  国产大飞机C919完成首次商业飞行
    
  2026年1月4日，东航MU789航班从上海虹桥飞往北京首都…
    2026年1月4日 08:30
    
  @@##@@
  

  注意： 的 datetime 值必须是机器可读格式（ISO 8601），显示文字可以本地化；

  不是必须，但比裸 更语义清晰。

  放哪？别塞进

  里凑数

  常见错误是把主导航栏硬塞进

  ，结果整个
  变得又宽又重。正确做法是：
  • 只放站点级标识：logo、主站名、全局搜索框
  • 独立放在
    下方，或作为
    的兄弟元素——它属于“页面导航”，不是“页眉装饰”
  • 如果列表页有分页（如“上一页/下一页”），那个分页也该用 ，别用 或

    最易被忽略的一点：新闻列表页的

    必须且只能有一个，且不能嵌套在 或
    内部——它是整个页面的主体容器，所有新闻 都得是它的直接子元素。否则，辅助技术可能完全跳过内容区域。