是否可以在定义列表 (<dl>) 中隐藏（显示：无；）定义项 (<dt>)？答案

【问题标题】：Is it okay to hide (display: none;) the definition term (<dt>) in a definition list (<dl>)?是否可以在定义列表 (<dl>) 中隐藏（显示：无；）定义项 (<dt>)？
【发布时间】：2011-05-12 07:55:03
【问题描述】：

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

选项 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，但由于某种原因，选项 2 在我看来语义更丰富，因为它定义了产品。我应该选择哪个选项，为什么？

【问题讨论】：

马克，塞巴斯蒂安，感谢您的夸奖。你也应该种一棵。

标签： css html definition semantic-markup

【解决方案1】：

如果您打算使用第二个，则不应使用display: none;。最好将文本放在屏幕外，以便屏幕阅读器仍然可以阅读。

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

【讨论】：

我只需要重申一下，漂亮的小胡子。
我实际上想知道这种可访问性对用户是否有用或乏味。这将出现在带有一堆其他项目的菜单中，所以我认为有屏幕阅读器的人也会希望隐藏名称/价格/描述，否则他们将不得不一遍又一遍地听这些词。跨度>

【解决方案2】：

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

【讨论】：

顺便说一句。漂亮的stache。不能说太多次