HTML5结构标签用于提升SEO、可访问性和响应式稳定性：每道菜用独立包裹完整信息，包住唯一主菜，须有独立主题并列使用，承载附属非核心内容，专管图片/视频及其说明。
菜谱页用 HTML5 结构标签不是为了“语义化得分”，而是让搜索引擎更快抓到主内容、屏幕阅读器准确跳转、移动端缩放更稳—— 必须包住唯一一道菜的完整信息，其他标签都得服从这个逻辑。
一道菜一个
常见错误是把整个菜谱列表用一个 包起来，或者每道菜用 。这会让辅助技术误判为“单篇长文”。实际场景中，用户点进的是“番茄炒蛋”这道菜，它就是独立可分发、可收藏、可分享的内容单元。
正确做法：
-
只包裹单道菜的全部信息（标题、图片、食材、步骤、小贴士） - 如果页面同时展示多道菜（比如“本周人气菜”），每个
各自独立，外面用或统一包裹 -
内部不要再嵌套另一个
番茄炒蛋
@@##@@食材
...步骤
...
很多开发者看到设计稿有“食材清单”“烹饪步骤”“小贴士”三个卡片式区域，就机械地每个都套一个 立即学习“前端免费学习笔记（深入）”； 判断依据： 在响应式菜谱页里， 容易踩的坑： 菜谱页里几乎每道菜都有成品图、步骤分解图、食材特写图，这些不是装饰性图片，而是内容刚需。用 必须用 注意：。但 HTML5 规范明确要求： 必须有主题且能单独出现在目录中。如果“小贴士”只有一句话，它就不构成 section，该用 或普通
–）？没有就别用
应该语义并列，不要出现“食材 → 步骤 → 步骤详解 → 小贴士 → 步骤补充”这种混搭
不是“侧边栏”，是“附属但非核心”信息 很少真出现在右侧——它可能折叠在底部、收进“更多”按钮后，甚至只在打印版显示。关键在于内容性质：营养成分表、作者小传、同类菜推荐、视频链接，这些和“怎么做番茄炒蛋”无直接流程关系，但有助于延伸理解。
里没问题；但若页面主体是“番茄炒蛋”，而“相关菜谱”占了首屏 60% 高度，那它其实已成主要内容，该用
里别放 或影响 SEO 主标题层级的标题，它不解决样式问题
作为
