HTML5 标记以引用随附文本中的列表项选项

Question

我正在创建参考 material 以帮助用户完成在线表格，并且需要在参考文本中参考表格的选择。

采取以下表格项目：

<select multiple name="animal">
  <option value="cats">Cats</option>
  <option value="dogs">Dogs</option>
  <option value="fish">Fish</option>
</select>

附带的文字可能是这样的：

For lovers of felines, please select Cats. Canine fans should choose Dogs.

有人建议我使用 <strong> 来突出显示它们，但语义上不太好：

For lovers of felines, please select <strong>Cats</strong>.  Canine fans should choose <strong>Dogs</strong>.

应使用哪个 HTML(5) 标记来突出显示文本中的项目选项 "cat" 和 "dog"？我已经通过 W3Schools and found <var> 上的那些看起来很合适，但是是否有 正确的 语义方法？

For lovers of felines, please select <var>Cats</var>.  Canine fans should choose <var>Dogs</var>.

Answer 1

W3C 是这样描述 var 的：

The element represents a variable. ref: https://www.w3.org/wiki/HTML/Elements/var

MDN 表示 var:

represents a variable in a mathematical expression or a programming context. ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var

我认为应用强调符合您的要求，em（强调）或 strong（强烈强调）都可以用于此目的。如果我还没有完全理解您的需求，请告诉我。

Answer 2

当然你可以简单地使用引号:

<p>For lovers of felines, please select "Cats". Canine fans should choose "Dogs".</p>

但是如果你想在这里使用标记，你可以使用 kbd together with samp:

When the kbd element contains a samp element, it represents input based on system output, for example invoking a menu item.

所以它看起来像这样：

<p>For lovers of felines, please select <kbd><samp>Cats</samp></kbd>. Canine fans should choose <kbd><samp>Dogs</samp></kbd>.</p>

（除非您确保视觉样式传达了这一点，否则在打印文档或无法感知颜色等情况下，您可能还需要使用引号。）

HTML5 标记以引用随附文本中的列表项选项

HTML5 tag to refer to a list item choice within accompanying text

html

semantic-markup