Is it okay to hide (display: none;) the definition term (<dt>) in a definition list (<dl>)?

So I have a list of menu items and I'm trying to figure out if I should use spans with class attributes or definition lists for the characteristics of each item. Here are the two options I am considering:

Option 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: "$"; }
}

Option 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; }
}

I'm curre开发者_如何学Gontly using option 1, but for some reason option two appears to me to be semantically richer since it defines the product. Which option should I go with and why?

If you're going to go with the second you shouldn't use display: none;. You'd be better off positioning the text off screen so screen readers can still get at it.

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

I say go with the semantically richer code (2) and hide the dt. maybe be more specific about which dts you're hiding: article.menu-item.dt {display: none }. it will make the text more readable, and avoid span and div soup in your code.