如何让外部<li>元素语义上归属指定<ul>？类似form属性效果

目前HTML原生并没有类似<input>的form属性那样，能直接让<li>归属外部<ul>的机制，但可以通过以下两种方案实现语义关联：

1. ARIA无障碍属性（推荐，支持辅助技术） #

给目标<ul>设置id，然后给外部<li>添加aria-labelledby属性关联该id，同时可显式声明role="listitem"（虽然<li>默认自带这个角色，但显式声明能让语义更清晰）。

示例代码：

<ul id="my_list">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

<!-- 外部的列表项 -->
<li aria-labelledby="my_list" role="listitem">列表项4</li>

这个方案能让屏幕阅读器等辅助设备识别到该<li>与my_list的关联，完美弥补原生HTML的语义缺口。

2. 自定义data-*属性（用于内部标记与逻辑） #

如果不需要无障碍支持，只是想在代码层面标记关联，可以用HTML自定义数据属性data-belongs-to，配合项目内的JS或CSS来处理样式、交互逻辑。

示例代码：

<ul id="my_list">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

<li data-belongs-to="my_list">列表项4</li>

注意：这个属性是纯自定义的，原生HTML和辅助技术不会自动识别，仅作为团队内部的语义约定和逻辑标记使用。

内容的提问来源于stack exchange，提问作者Oscar