Ist es in Ordnung, den Definitions-Begriff (<dt>) in einer Definitionsliste (<dl>) zu verstecken (Anzeige: keine;)?

Question

Also habe ich eine Liste von Menüpunkten und ich versuche herauszufinden, ob ich Spannweiten mit Klassenattributen oder Definitionslisten für die Eigenschaften jedes Elements verwenden soll. Hier sind die beiden Optionen Ich erwäge:

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

ich zur Zeit mit der Option 1, aber aus irgendeinem Grund Option zwei scheint mir semantisch reicher sein, da es das Produkt definiert. Mit welcher Option sollte ich gehen und warum?

Answer 1

Wenn Sie mit der Sekunde gehen, sollten Sie nicht display: none; verwenden. Sie sollten besser den Text außerhalb des Bildschirms positionieren, damit Bildschirmleser immer noch darauf zugreifen können.

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

Answer 2

Ich sage gehen Sie mit dem semantisch reicher Code (2) und verstecken Sie die dt. vielleicht genauer sein, welche dts du versteckst: article.menu-item.dt {display: none }. Es macht den Text lesbarer und vermeidet Spanne und Div-Suppe in Ihrem Code.