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