HTML5结构标签用于提升SEO、可访问性和响应式稳定性：每道菜用独立<article>包裹完整信息，<main>包住唯一主菜，<section>须有独立主题并列使用，<aside>承载附属非核心内容，<figure>专管图片/视频及其说明。
菜谱页用 HTML5 结构标签不是为了“语义化得分”，而是让搜索引擎更快抓到主内容、屏幕阅读器准确跳转、移动端缩放更稳——<main> 必须包住唯一一道菜的完整信息，其他标签都得服从这个逻辑。
一道菜一个 <article>，别套在列表外
常见错误是把整个菜谱列表用一个 <article> 包起来，或者每道菜用 <section>。这会让辅助技术误判为“单篇长文”。实际场景中，用户点进的是“番茄炒蛋”这道菜，它就是独立可分发、可收藏、可分享的内容单元。
正确做法：
-
<article>只包裹单道菜的全部信息（标题、图片、食材、步骤、小贴士） - 如果页面同时展示多道菜（比如“本周人气菜”），每个
<article>各自独立，外面用<main>或<section>统一包裹 -
<article>内部不要再嵌套另一个<article>
<main>
<article>
<h1>番茄炒蛋</h1>
<img src="tqcd.jpg" alt="番茄炒蛋成品图">
<section><h2>食材</h2>...</section>
<section><h2>步骤</h2>...</section>
</article>
</main>
<section> 按功能切，不是按视觉块切
很多开发者看到设计稿有“食材清单”“烹饪步骤”“小贴士”三个卡片式区域，就机械地每个都套一个 <section>。但 HTML5 规范明确要求：<section> 必须有主题且能单独出现在目录中。如果“小贴士”只有一句话，它就不构成 section，该用 <aside> 或普通 <div>。
立即学习“前端免费学习笔记（深入）”；
判断依据：
- 该模块是否有独立标题（
<h2>–<h6>）？没有就别用<section> - 把它抽出来，是否仍能被理解为一个完整子主题？比如“火候技巧”可以，但“本菜热量：320kcal”不行
- 同一级
<section>应该语义并列，不要出现“食材 → 步骤 → 步骤详解 → 小贴士 → 步骤补充”这种混搭
<aside> 不是“侧边栏”，是“附属但非核心”信息
在响应式菜谱页里，<aside> 很少真出现在右侧——它可能折叠在底部、收进“更多”按钮后，甚至只在打印版显示。关键在于内容性质：营养成分表、作者小传、同类菜推荐、视频链接，这些和“怎么做番茄炒蛋”无直接流程关系，但有助于延伸理解。
容易踩的坑：
- 把“相关菜谱”列表放在
<aside>里没问题；但若页面主体是“番茄炒蛋”，而“相关菜谱”占了首屏 60% 高度，那它其实已成主要内容，该用<section> -
<aside>里别放<h1>或影响 SEO 主标题层级的标题 - 不要只为实现 CSS 浮动或栅格布局而用
<aside>，它不解决样式问题
<figure> 和 <figcaption> 是图片/视频的标配容器
菜谱页里几乎每道菜都有成品图、步骤分解图、食材特写图，这些不是装饰性图片，而是内容刚需。用 <img> 单独放，搜索引擎无法识别其与当前菜谱的强关联；用 <div> 包裹又丢失语义。
必须用 <figure> 的场景：
- 步骤图配文字说明（如“图3：蛋液倒入锅中，待边缘微凝时快速划散”）
- 同一道菜的多角度图组（用
<figure>包整体，内部多个<img>+ 共享一个<figcaption>） - 嵌入 YouTube 烹饪视频（
<iframe>作为<figure>子元素，<figcaption>写“3 分钟高清演示”）
注意：<figure> 可以脱离上下文存在，所以它里面不要放“点击查看大图”这类纯交互提示——那是 JS 控制的，不属于内容语义。
