HTML中无season/episode语义标签，应使用等标准标签包裹剧集内容，用data-season="04" data-episode="12"存编号，再配schema.org JSON-LD结构化数据实现SEO与可访问性。
HTML里没有专门标剧集的语义标签
浏览器和搜索引擎都不认识 season 或 episode 这种自定义标签，硬写 <season>2</season> 不仅无效，还可能被解析为未知元素、丢失样式或影响可访问性。
真正能被识别、被读屏软件理解、被爬虫合理提取的，只有标准 HTML5 语义标签 + 合理的属性组合。
- 用
<section></section>或<article></article>包裹单集内容，比用<div> 更有结构意义<li>剧集编号属于「元数据」，适合放在 <code>data-属性里，比如data-season="3"和data-episode="7" - 如果需要机器可读（如结构化数据），得额外加
script type="application/ld+json"，不能只靠 HTML 标签
用 data- 属性存 season/episode 最实用
这是前端最常用、后端最容易取值、又完全合法的方式。它不干扰渲染，也不依赖 JS，纯 HTML 就能写死或由模板引擎注入。
例如在列表项里标注第 4 季第 12 集：
立即学习“前端免费学习笔记（深入）”；
<article data-season="4" data-episode="12"> <h3>The Final Countdown</h3> <p>S04E12 • 2024-05-18</p> </article>
-
data-属性名必须小写，连字符分隔，不能用驼峰（data-seasonNumber是错的） - 值建议用字符串统一格式：季号补零（
"03"）、集号补零（"09"），避免排序错乱 - 不要把数字当布尔值用，比如
data-season="true"—— 后续想查 S2 就没法直接匹配了
Schema.org 结构化数据才是 SEO 和聚合平台要的
光靠 HTML 标签，Google TV、IMDb、Apple Podcasts 这类平台根本抓不到你的剧集信息。它们依赖 script type="application/ld+json" 里的 TVSeason 和 TVEpisode 类型。
一个最小可用的单集结构示例：
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "TVEpisode",
"name": "The Final Countdown",
"episodeNumber": "12",
"partOfSeason": {
"@type": "TVSeason",
"seasonNumber": "4"
},
"datePublished": "2024-05-18"
}</script>-
episodeNumber和seasonNumber必须是字符串，不是数字（JSON-LD 规范要求） - 别漏掉
partOfSeason，否则 Google 可能无法关联季与集 - 这个
<script></script>可以放在或页面任意位置，但必须和对应 HTML 内容逻辑一致
别在 aria-label 里塞 season/episode 编号
有人为了“让读屏软件读出来”，在按钮或链接上写 aria-label="Play S02E05 - The Long Night"。这看似友好，实则埋雷：
- 屏幕阅读器会原样朗读整段，用户无法跳过编号只听标题
- 如果标题本身已含 “S02E05”，再重复一次就是冗余，违反 WCAG 原则
-
aria-label会完全覆盖元素内的文本，导致视觉用户看到标题，而辅助技术用户听到的是另一套文案 - 正确做法是保持可见文本清晰（如
<span class="ep-id">S02E05</span> 第五集：长夜），必要时用aria-describedby关联解释性文字
真正麻烦的不是怎么写 HTML，而是得同时维护三套信息：DOM 结构、data- 属性、JSON-LD 脚本。只要其中一套漏同步，前端显示、API 返回、搜索引擎收录就可能对不上号。
