是否可以在定义列表（<dl>）中隐藏（display：none;）定义术语（<dt>）？</dl> </dt>

Question

所以我有一个菜单项列表，我试图找出是否应该使用带有类属性或定义列表的跨度来表示每个项目的特征。以下是我正在考虑的两个选项：

选项1）

// HAML Markup

%article.menu-item
  %span.name
    Cereal
  %span.price
    4.00
  %span.description
    We carry Cap'n Crunch, Frooty Loops and Count Chocula. Milk included.

// Styling

article.menu-item {
  .price:before { content: "$"; }
}

选项2）

// HAML Markup

%article.menu-item
  %dl
    %dt
      Item
    %dd
      Cereal
    %dt
      Price
    %dd
      4.00
    %dt
      Description
    %dd
      We carry Cap'n Crunch, Frooty Loops and Count Chocula. Milk included.

// Styling

article.menu-item {
  .price:before { content: "$"; }
  dt { display: none; }
}

我目前正在使用选项1，但出于某种原因，在我看来，选项二在语义上更丰富，因为它定义了产品。我应该选择哪个选项？为什么？

Answer 1

我说使用语义更丰富的代码（2）并隐藏dt。也许更具体地说明你隐藏的是哪些dts：article.menu-item.dt {display: none }。它会使文本更具可读性，并避免代码中的span和div汤。

Answer 2

如果您要使用第二个，则不应使用display: none;。你最好将文本放在屏幕上，这样屏幕阅读器仍然可以使用它。

dt {
    position: absolute;
    left: -9999px;
    top: -9999px;
}