语义侧注的HTML元素是什么？

我喜欢在我的博客文章中添加响应性的旁注。响应如中所示：隐藏在小视口中，在宽视口的边距中可见

当隐藏在小屏幕上时，需要一个可见元素（“链接”），表示还有更多内容要读。到目前为止，我的解决方案是：

<p>Some sentence with
<span class="sidenote" onclick="this.classList.toggle('active');">
  underlined text
  <span class="sidenote__content">
    Sidenote content
  </span>
</span>, which is clickable on small viewports.</p>

一些带有
下划线文本
旁注内容
，可在小视口中单击

（增加了换行符以提高可读性）

使用CSS，我在带下划线的文本和侧注内容中添加星号，以便在大屏幕上直观地连接它们

此解决方案的问题在于

sidenote\u内容的正确显示取决于CSS。它显示在Pocket之类的阅读器中，带有：


旁注内容在句子中间显示，没有任何视觉线索
下划线文本和旁注内容之间没有空格

我希望有一个比简单跨度更具语义的解决方案<代码>父元素的p元素

解决方案可以是将侧注内容与链接分离。然而，我更愿意将sidenote的集合和它的链接作为一个集合或一对，这样它们就可以被插入到文章中。将它们拆分需要javascript逻辑来匹配链接及其内容，并且在缺少一半链接集时可能会导致维护问题。
这些问题有5个挑战：

为sidenote引用的范围选择正确的HTML元素
为sidenote的内容选择正确的HTML元素：

旁注内容必须有标签
Sidenote内容可能包含可以接收键盘焦点的可单击元素

确保所选元素不会导致其父标签自动关闭
确保读卡器模式和Pocket等读卡器以可接受的排版方式显示侧注内容
确保屏幕阅读器以合理的流程读取sidenote内容
**挑战1的解决办法**
链接的外观主要是表现性的，因为它在宽视口上不提供交互。
似乎是最适合此目的的标签。如果侧注正好出现在“链接”旁边（而且会出现），我看不出有必要或目的在脚注中添加
href
或
id

挑战2和挑战3的解决方案

对侧注内容（，）使用
标记

挑战4和5的解决方案

在读卡器模式下，为未设置样式的外观在侧注内容周围添加带有空格和括号的跨距。对于屏幕阅读器，也添加“sidenote:”。结果如下所示：

（旁注：这是旁注）

隐藏那些与CSS

组合解决方案

HTML:

在我看来，您应该使用
details
标记

HTML Details元素（）在
只有当小部件切换到
“开放”状态。可以使用提供摘要或标签
元素

从语义的角度来看，标签的目的是完全满足您的需要

有关更多信息，请访问

现在的问题是，Edge不支持该标记，但它“正在开发中”。
我认为缩写标记正是您需要的


请参阅更多：



来自WCAG

我不太确定您希望显示哪种旁注，但从语义角度来看，我认为
元素可能是一个不错的选择：

用于表示在定义短语或句子的上下文中定义的术语

内容类别：流动内容、措辞内容、可触及内容

允许的内容语法内容，但任何元素都不能是后代

根据您的要求，我想在大屏幕上显示
中的定义是一个好主意，它表示文档的一部分
内容仅与文档的主要内容间接相关。
旁白通常显示为边栏或呼出框

最后但并非最不重要的一点是，在小屏幕上，它可能是首选的解决方案，因为只有当元素处于焦点时，它才会打开。此外，这也可以与大屏幕解决方案并行使用而不会造成伤害。
将两者分开，并让链接的
href
指向sidenote的
id
可能是最可移植的语义解决方案。另一种方法是将sidenote作为
data-*
属性存储在
span
上，包装带下划线的文本，然后使用CSS伪元素有条件地内联显示该内容。但这可能不是那么方便携带。基于和，
元素似乎是sidenote内容的最佳候选。不过，使用
并不能解决内容在句子中的可见性问题。我认为你关于必须拆分部分的观点是对的。我的第一个想法是
元素，出于同样的原因，它被排除在外。出于某种原因，我天生就不喜欢
，但我认为这是我以前在表格布局时，然后转向语义时的表现<代码>
感觉——不公正地——像是倒退了一步。问得好！：）添加
显示：无删除括号也会对屏幕阅读器隐藏它们，产生奇怪的句子。如果您想在视觉上隐藏它们（但仍然保留它们以供屏幕阅读器和人们复制和粘贴），您应该使用这样的技术：而且，根据用户的视口宽度有条件地删除段落中的文本块似乎并不太好。建议在所有屏幕大小上保持文本一致。感谢您指出可访问性问题
<!-- line breaks added for readability.
Remove them to avoid rendering of superfluous spaces. -->
<p> A paragraph with a
  <span class="sidenote">
    <label
      tabindex="0"
      title="The content of the sidenote."
      aria-describedby="sidenote-1"
      class="sidenote__button onclick="this.classList.toggle('active');"
      onKeypress="if(event.key === 'Enter' || event.key === ' '){event.preventDefault(); this.parentNode.classList.toggle('active');
    >
      clickable element
    </label>
    <small class="sidenote__content" >
      <span class="sidenote__content-parenthesis"> (sidenote: </span>
      The content of the sidenote.
      <span class="sidenote__content-parenthesis">)</span>
    </small>
  </span>
that can be clicked to show more details.
</p>

.sidenote__content-parenthesis{
  // Hide from view, but not from screen readers.
  text-indent: -99999px;
}

@media (max-width: 1000px){
  .sidenote__content{
    // Hide from view, but not from screen readers.
    // The vertical position doesn't change, which is better for handling keyboard focus than 'text-indent: -99999px;'
    position: absolute;
    left: -99999px;
    top: auto;
  }
  .sidenote.active .sidenote__content{
    position: relative;
    left: auto;
  }
}

@media (min-width: 1000px){
  .sidenote__content{
    display: block;
    position: absolute;
    right: 0;
    margin-right: -300px;
    width: 200px;
  }
}