数学公式和数字（内联）的最佳语义 HTML 元素是什么？

Question

我写了很多数学文章，想知道在文本中标记数字/公式的最佳方法是什么。

我主要使用 Latex，但我会尽量避免使用它，并在合适的情况下使用内联 HTML 元素。

目前我正在使用

<code>123</code>

（样式与 CSS 内联），这会产生易于阅读的文本块，例如：

但是由于它不是

code

，所以它在语义上是不正确的。

元素研究

我试图找到语义上最合适的 HTML 元素。这些是我的结果：

1. <var>

   HTML 元素：

该元素代表数学或计算机编程上下文中的变量。

但不适用于数字、公式。

2. 此外，

   <q>

   （行内引用）、

   <abbr>

   或

   <dfn>

   似乎不适用。

3. <data>

   看起来有点宽泛，而且还带有数据属性。

4. <mark>

   将成为候选人。

“此标签突出显示内容，因为它在某些上下文中具有特殊相关性。”

如你所见，我正在猜测并需要建议。

$标签$

有一个单独的

<math>

元素（reference）。

该元素用于在当前行中包含数学表达式。

它是为与MathML一起使用而设计的。 HTML 不能在内部使用，因为内容是使用预期的 MathML 语法呈现的。

示例：

<math>&int;_a_^b^{f(x)<over>1+x} dx</math>
<math>Z<sub>1</sub> = 100 €</math>

结果：

∫_a_^b^{f(x)1+x} dx Z₁ = 100 €

第一个示例工作正常，第二个示例失败（甚至没有渲染）。

...完整的 MathML 表达式必须包含在标签中。 (...) 封闭标签的存在应该是对 MathML 内容的合理启发式测试。 (...) 然而，MathML 支持 HTML 的问题带来了许多困难。 (...) 因此，目前 MathML 规范不允许 MathML 表达式中包含任何 HTML 元素。

Answer 1

由于这已经很旧了，没有答案，我为后续观看者提供一些详细信息：

我通常推荐以下内容：

<svg />

图像，通常位于

<figure>

内。它需要使用

<figcaption>

和/或

aria-

属性提供足够的详细信息，以在语义上正确提供帮助......

...我也尝试了很多hacky方法：

<var>

（变量）、

<samp>

（示例）、

<tt>

（内联文本）等标签可能很有用，但不是用于此目的，我记得必须使用以下任一方法来测试上述内容的复杂组合

<input inert type="number">

、

<table>

或

<dl>

创建可正确阅读辅助技术的工作示例...我真诚地建议避免这种情况！

现在我们有...

今天，

<math>

似乎比其他方法更可取 <https://developer.mozilla.org/en-US/docs/Web/MathML/Element/math>，但当支持是一个问题或时间限制需要快速解决方案时，我仍然使用

<svg>

。