歌单页主体必须用包裹，且仅一个；歌单封面、标题、简介、歌曲列表等核心内容属于内，其中可分语义分组；歌曲列表须用保持序号语义；仅用于强相关非核心内容如相似歌单。
歌单页用 <main></main> 还是 <section></section>？
歌单页的主体内容（比如歌单封面、标题、简介、歌曲列表）必须包裹在 <main></main> 里——它代表整个页面唯一的主要内容区域，搜索引擎和读屏工具靠这个识别“这里才是重点”。<section></section> 是语义分组容器，不能替代 <main></main>；滥用会导致结构扁平、辅助技术误判。
常见错误：把整个歌单页塞进一个 <section></section>，或者用多个 <main></main>。HTML5 规范明确要求每页最多一个 <main></main>。
-
<main></main>只包歌单核心信息流，不包含顶部导航、侧边推荐、页脚 - 歌单封面+标题+简介可组成一个
<section></section>，加aria-labelledby关联标题 - 歌曲列表建议单独用一个
<section></section>，并设heading为“歌曲列表”
歌曲列表该不该用 <ol></ol>？
应该用 <ol></ol>。歌单本质是**有序集合**：播放顺序、拖拽排序、跳转定位都依赖序号逻辑。用 <div> 或 <code><ul></ul> 会丢失原生语义和键盘导航行为（如按数字键跳转第 N 首）。
注意：不要手动写 <li>1. 歌名</li> 这类冗余序号——<ol></ol> 的计数由浏览器自动处理，CSS 用 list-style-type: none 隐藏也不影响语义。
立即学习“前端免费学习笔记（深入）”；
- 每首歌用
<li>包裹，内部结构保持一致（如<button></button>播放、<span class="song-title"></span>） - 避免在
<ol></ol>外再套一层<div>，破坏列表语义链<li>若支持拖拽重排，需配合 <code>draggable="true"和 ARIAaria-grabbed状态 - 相似歌单推荐区块：适合
<aside></aside>，加aria-label="相似歌单推荐" - 右侧“播放统计”（如“已播放 2.3 万次”）属于歌单元数据，更适合放在
<section></section>内的<footer></footer>里 - 用户评论区不属于
<aside></aside>，它是独立内容模块，应使用<section></section>+<h2></h2> - 整站通用导航用外部
<header></header>（在<main></main>外） - 歌单专属标题区用
<main><header>...</header>...</main> -
<footer></footer>同理，避免出现在<main></main>外层
<aside></aside> 放什么才不算滥用？
<aside></aside> 在歌单页只适合放**与当前歌单强相关但非核心**的内容，比如：该歌单创建者的其他热门歌单、相似风格推荐、曲风标签云。不是所有侧栏都该用 <aside></aside>——广告位、登录入口、全局客服入口应保持为 <div> 或用 <code><nav></nav>（如果是导航类）。
关键判断标准：把这块内容删掉，歌单页是否仍能独立、完整表达其本意？如果可以，才考虑 <aside></aside>。
为什么 <header></header> 和 <footer></footer> 必须嵌套在 <main></main> 里？
歌单页的 <header></header>（如歌单标题、作者、收藏按钮）和 <footer></footer>（如更新时间、版权说明）描述的是**这个歌单本身**，不是整站的头部/尾部。它们属于 <main></main> 的一部分，语义上是“主内容的头尾”，不是“页面的头尾”。
混淆后果：屏幕阅读器可能把歌单标题读成“网站标题”，或把更新时间当成全站版权信息。
<body>
<header><!-- 全站导航 --></header>
<main>
<header><h1>夏日治愈歌单</h1><button>收藏</button></header>
<section><!-- 歌单简介 --></section>
<section>
<h2>歌曲列表</h2>
<ol><li>...</li></ol>
</section>
<footer><time datetime="2024-06-10">更新于 6 月 10 日</time></footer>
</main>
<aside><!-- 相似歌单 --></aside>
</body>结构层级错一阶，语义就偏一点。最常被忽略的是把歌单 <header></header> 提到 <main></main> 外，结果让辅助工具以为那是网站 banner。
