作为标题一部分的列表的正确语义是什么？答案

【问题标题】：What is the proper semantics for a list as part of a heading?作为标题一部分的列表的正确语义是什么？
【发布时间】：2020-04-13 00:53:41
【问题描述】：

我有一个文本滑块，可以在单个单词列表中垂直循环。这是一个大标题，列表继续声明，例如 I do x, I do y, I do z。

我知道将ul 放入h2 是无效的，但是在语义上标记它的正确方法是什么？

HTML

  <h2><span>Oh hey&nbsp;</span>
    <ul class="vertical slider">
      <li>one.</li>
      <li>two.</li>
      <li>three.</li>
      <li>four.</li>
      <li>five.</li>
    </ul>
  </h2>

每个单词周围只有一个span？

小提琴 https://jsfiddle.net/iraishere/5mtws3po/

【问题讨论】：

标签： html semantic-markup

【解决方案1】：

在考虑动态内容的标记语义时，考虑一下如果它是静态的，您将如何处理它会很有帮助。如果您要将内容写成静态文档中的连贯标题，您可以这样做：

<h2>I do foo, bar, and zed.</h2>

您可以将其用作如何标记动态内容的模型。考虑保持相同的结构并使用 CSS 在视觉上隐藏您不需要的部分。

/* add period and space after each item */
.item:after {
  content: ". ";
}

/* visually hide sentence semantic parts */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

&lt;h2&gt;I do &lt;span class="item"&gt;foo&lt;/span&gt;&lt;span class="sr-only"&gt;, &lt;/span&gt;&lt;span class="item"&gt;bar&lt;/span&gt;&lt;span class="sr-only"&gt;, and &lt;/span&gt;&lt;span class="item"&gt;zed&lt;/span&gt;&lt;span class="sr-only"&gt;.&lt;/span&gt;&lt;/h2&gt;

剩下的就看你的javascript动画了。

【讨论】：