健身网站需严格遵循HTML语义化规范：主标题用唯一<h1>，简介置于<main><section>内，封面图用<figure>，动作列表必须用<ol>而非<section>，评论区用带aria-labelledby的<section>。
健身网站不是堆 div 拼出来的，而是靠语义结构撑起来的——用错一个标签，SEO 掉权重、屏幕阅读器读错逻辑、键盘用户跳不过列表，全在你写第一行 <header> 时就埋了雷。
课程页主标题和简介怎么套标签
主标题必须是全页唯一的 <h1>，不是 <h2> 或多个 <h1>。简介段落不属于 <header> 的职责范围，哪怕它紧挨着标题显示。
-
<header>只包裹本节的元信息：比如课程名 + 难度图标 + 教练头像 + 收藏按钮，不包封面图、不包简介文字 - 简介属于主体内容，应放在
<main><section>内，用<p>或带辅助数据的<dl>（如“训练时长：<dd>45分钟”） - 封面图必须用
<figure><img><figcaption>，不能塞进<header>里“凑结构”
训练动作列表为什么不能用 <section>
动作顺序不可更改，本质是有序数据流，不是逻辑区块。用 <section> 会丢失顺序语义，键盘 Tab 键直接跳过整块，语音助手无法识别为“第1个动作、第2个动作……”
- 必须用
<ol>，每个动作项用<li>包裹 -
<li>内部用<h3>标动作名，<time>标组数/次数（如<time datetime="3x12">3组×12次</time>），<meter>标强度（value="7" max="10"） - 若划分“热身→主训→拉伸”，才在外层用三个
<section>，每个内部再放各自的<ol> - 视频演示直接放对应
<li>里，不要额外套<figure>—— 除非你要加字幕轨道或下载链接
评论区该用 <section> 还是 <aside>
评论区是强关联的独立交互模块，不是附属内容，也不是侧边栏式提示，必须用 <section> 并带上 aria-labelledby 指向评论标题。
立即学习“前端免费学习笔记（深入）”；
-
<aside>只适用于真正“可脱离上下文存在”的内容，比如同类课程推荐、营养小贴士浮层、教练资质说明 -
<section>配合aria-labelledby="comments-title"，能让屏幕阅读器明确告知“这是‘用户评论’区域” - 禁用
<div class="comments"—— 它既无语义，也不支持原生焦点管理，表单提交后无法自动滚动到新评论位置
最常被忽略的是：语义标签不是“锦上添花”，而是功能前提。一个没用 <ol> 的动作列表，哪怕 CSS 再漂亮，对残障用户就是不可操作的黑箱；一个把简介硬塞进 <header> 的页面，搜索引擎可能直接判定结构混乱而降权。写完第一版 HTML，先关掉样式看结构树，再用键盘 Tab 测试导航流——这才是健身网站能真正“动起来”的起点。
