课程页应正确使用html5语义标签：主标题用唯一，简介放内中；课程卡片用，动作列表用而非；评论区用并关联aria-labelledby。
健身网站的课程页不需要堆砌 <div>，用对 HTML5 结构标签就能让语义清晰、SEO 友好、屏幕阅读器可读——关键不是“用不用”，而是“在哪用对”。
<h3>课程标题和简介该套哪个标签</h3>
<p>课程主标题必须用 <code><h1></h1>（全页唯一），但简介段落不能塞进 <header></header> 里凑数。真实场景中，<header></header> 应包裹整个课程页顶部区域，包括：课程名、难度图标、教练信息、收藏按钮。简介文字属于内容主体，应放在 <main></main> 内部的 <section></section> 中，用 <p></p> 或 <aside></aside>（若含训练目标/时长/消耗卡路里等辅助信息）。
-
<header></header>不等于“页面最上面那块”，它只负责本节内容的头部元信息（比如某个训练模块的子标题） - 多个同级课程卡片列表，每个卡片用
<article></article>包裹，内部再设自己的<header></header> - 避免把课程封面图放进
<header></header>—— 图片是内容，不是结构头；该用<figure></figure>+<img alt="HTML5结构标签在健身网站怎么用_课程页布局搭建教程【教程】" >+<figcaption></figcaption>
训练动作列表为什么别用 套
训练动作是课程页的核心数据流，不是普通“章节”。用 <section></section> 会模糊其功能性语义。正确做法是用 <ol></ol>（有序列表），因为动作顺序不可调换；每个动作项用 <li>，内部嵌套 <h3></h3>（动作名）、<time></time>（组数/次数）、<meter></meter>（强度值）等内联语义标签。
-
<section></section>适合划分逻辑区块（如“热身”“主训”“拉伸”），每个区块用一个<section></section>，内部再放<ol></ol> - 若动作含视频演示，
<video></video>应直接放在对应<li>内，不要额外包<figure></figure>—— 除非需添加字幕或下载链接 - 禁用
<div class="exercise-list"> 替代 <code><ol></ol>：丧失语义、键盘导航跳过、无法被语音助手识别为列表课程评论区用
评论区不是课程内容的一部分，也不是侧边栏式辅助信息，它是独立交互模块，且与当前课程强关联。应该用
<section></section>，并加aria-labelledby指向评论标题；<aside></aside>仅适用于真正“附属”的内容（比如同类课程推荐、营养小贴士浮层）。立即学习“前端免费学习笔记（深入）”；
- 用户提交评论的表单必须放在
<section></section>内部，且用<form></form>标签明确标注 - 每条评论用
<article></article>，包含<header></header>（用户头像+昵称+时间）、<p></p>（正文）、<footer></footer>（点赞/回复按钮） - 若评论区支持折叠，默认收起时，用
hidden属性而非display: none，确保无障碍工具仍可感知其存在
<section aria-labelledby="comments-title"> <h2 id="comments-title">学员反馈</h2> <form> <label for="comment-input">写下你的感受</label> <textarea id="comment-input" required></textarea> <button type="submit">发布</button> </form> <article> <header> @@##@@ <strong>张伟</strong> <time datetime="2024-04-10">4月10日</time> </header> <p>第3周明显感觉核心更稳了，动作控制力提升很多！</p> </article> </section>最常被忽略的是：HTML5 标签不解决样式问题，但错误嵌套会让 CSS 选择器失效、JS 获取元素逻辑错乱、甚至导致部分旧版读屏软件完全跳过整块内容。别为了“语义化”而硬套标签，先想清楚这段内容在用户心智模型里“算什么”，再选标签。
- 用户提交评论的表单必须放在
