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