文章分类页应使用语义化容器：用<section>包裹分类列表，<nav>包裹分类导航，<main>明确包裹主要内容；分类标题按<h1><h2><h3>严格递进；文章卡片需含<header><footer>及<time>等语义标签。
文章分类页该用什么语义化容器
直接用 <section> 或 <article> 套分类列表，比一堆 <div> 更合理。前者告诉浏览器和屏幕阅读器“这是独立的内容区块”，对 SEO 和无障碍支持有实际影响。
-
<section>适合一组相关但非独立的文章集合（比如“前端技术”分类下所有文章） -
<article>必须包裹单篇完整内容（标题、正文、时间等），不能只套个链接或摘要 - 避免把整个分类页塞进一个
<article>—— 这会误导语义，浏览器可能把它当单篇文章处理
分类导航栏怎么写才不踩坑
分类导航本质是“链接集合”，不是列表数据，所以优先用 <nav> 包裹，内部用 <ul> + <li> 是稳妥做法。别用 <div> 堆链接，也别漏掉 <nav> 的语义包装。
- 每个分类项必须是
<a>，且href指向真实路径（如/category/frontend），别用#占位 - 如果当前分类高亮，加
aria-current="page"属性，比纯 CSS 类更可靠（辅助设备能识别） - 不要在
<nav>里塞搜索框或按钮 —— 那属于功能组件，应另起容器
分类标题层级怎么安排才合规
整个页面只有一个 <h1>，它必须是页面主标题（比如“全部文章”或“技术博客”），而不是某个分类名。分类名用 <h2>，子分类或筛选条件用 <h3>，严格递进。
- 跳级（比如
<h1>后直接<h4>）会让屏幕阅读器混乱，也影响 Google 抓取权重分配 - 分类页 URL 中的路径名（如
/category/css）不必强行对应<h2>文本，但语义上要一致 - 如果分类页带筛选栏（如“按年份”“按标签”），这些筛选控件不用标题标签，用
<fieldset>+<legend>更合适
文章卡片列表的最小结构单元
每张卡片至少包含 <header>（含标题和元信息）、<p>（摘要）、<footer>（发布时间/分类标签）。别省略 <header> 和 <footer> —— 它们不是装饰，是语义锚点。
立即学习“前端免费学习笔记（深入）”；
-
<header>内必须有<h3>或更低级标题，不能只放<span> - 摘要用
<p>，别用<div>+ CSS 控制行高 —— 语义丢失后，语音朗读会跳过段落间隙 - 发布时间建议用
<time datetime="2026-07-15">2026年7月15日</time>，机器可解析，比纯文本强得多
<main> 区域必须明确包裹所有主要内容，且不能嵌套在 <aside> 或 <footer> 里；否则，辅助技术可能跳过整块内容。 
