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