用 <aside> 包裹推荐区，每张卡片用语义化 <article>，标题用 <h3>，链接带 href 和有意义的 aria-label，配图加描述性 alt，CSS 用 flex 布局并设断点响应式，辅以 data-topic 属性和 JSON-LD 结构化数据提升可访问性与 SEO。
怎么用 HTML 做出可点击的相关文章卡片
纯 HTML 本身不“推荐”，它只负责结构和链接；所谓“相关文章推荐”，本质是把已有内容按某种逻辑组织成带标题、摘要、链接的卡片块。关键在你怎么写 <article> 或 <section>，以及怎么用语义化标签表达关联性。
常见错误是直接堆 <div> + 行内样式，结果搜索引擎看不懂哪篇是“相关”，屏幕阅读器也读不出上下文。应该用 <aside> 包裹整个推荐区，每张卡片用 <article>，标题用 <h3>（别用 <h2>，避免层级混乱），链接必须带 href 和有意义的 aria-label。
-
<aside>是语义上最合适的容器，表示与主内容相关但非核心的补充信息 - 每张卡片用
<article>，不是<div>—— 这能让 RSS 解析器、爬虫识别出这是独立内容单元 - 链接文本别写“点击查看”，改用文章主题词，比如
<a href="/seo-basics">SEO 基础：从 title 标签开始</a> - 如果卡片含图片，
<img>必须有alt，且描述图中关键信息，不是“相关文章配图”这种废话
CSS 怎么让卡片横向排列又响应式
靠 display: flex 最稳，但得注意断点处理和最小宽度限制，否则小屏下卡片会被压扁或换行错乱。
典型翻车场景：用 float 或绝对定位强行排三列，结果在 iPad 竖屏下只剩一列还留大片空白；或者没设 flex-wrap: wrap，导致超宽溢出隐藏。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 父容器加
display: flex+flex-wrap: wrap - 每张卡片设
flex: 1 1 calc(33.333% - 1rem)（三列），并配合min-width: 280px防止过窄 - @media 查询在
max-width: 768px时切为flex-direction: column，不是单纯改列数 - 别依赖
width: 33%—— 它不考虑 margin/gap，用gap替代 margin 更可控
怎么让“相关”看起来真有关联，而不是随机塞的
HTML 层面没法自动判断语义相关性，但可以通过属性和结构暗示关系。用户扫一眼就得明白：“这三篇为什么被放在一起？”
最容易被忽略的是缺乏上下文锚点。比如主文章讲 <input type="date">，推荐区却没任何提示说明这些卡片都属于“表单增强”这个主题。
- 在
<aside>开头加一句简短说明，如<p>延伸阅读：HTML 表单交互优化</p> - 给每张卡片加
data-topic="form"或data-tag="accessibility"，方便后续 JS 做筛选，也便于维护时快速定位 - 避免在卡片里重复主文章标题，摘要要差异化——比如主文讲原理，推荐卡片就标“实战案例”或“兼容性补丁”
- 如果某篇是译文或转载，用
<small>译自 MDN</small>明确标注，别藏在 footer 里
要不要加 JSON-LD 让搜索引擎识别推荐关系
要，但只在需要 SEO 强曝光的页面加。JSON-LD 不影响渲染，但能帮 Google 理解“这篇内容推荐了哪些其他内容”，可能提升聚合页或富媒体搜索结果展示概率。
坑在于硬套模板：很多人复制别人博客的 Article 结构，却忘了改 @id 和 url，结果 Google 抓到一堆 404 的推荐链接。
- 只对真实存在的、已上线的推荐文章生成
recommendedArticle字段 -
@id必须是完整 URL（含协议），不能是相对路径/post/xxx - 字段名严格用
"@type": "Article"，别写成"type": "article"—— 大小写和引号都影响解析 - 测试用 Google 的 Rich Results Test 工具验证，别光看代码有没有报错
真正难的不是写几行 HTML，而是每次加一张推荐卡片前，得想清楚：它和当前页的逻辑连接点在哪？这个点，得让用户一眼看到，也让机器能抽出来。
