Listen im Fließtext

[Rolf B]

Hallo alle,

der Artikel "Listen" im Wiki wurde von einem IP User derart ergänzt, dass die HTML Elemente für Listen Blockelemente sind und deshalb immer untereinander stünden.

Hold my beer, dachte ich, und baute flugs ein p Element mit einer auf inline getrimmten Liste drin. Natürlich hat mir der Browser das Bier dann in die Schuhe gekippt, weil ein p Element nur Phrasing Content akzeptiert und <ol> Flow Content ist.

Das kann man "heilen", indem man statt <p> ein <div> verwendet und passendes Styling für Textparagraphen ergänzt. Soweit ich weiß, hat ein <p> auch keine besondere Aria-Rolle.

Hinzu kommt dann noch, dass ein ˋdisplay:inlineˋ die Eigenschaft ˋdisplay: list-itemˋ überschreibt. D.h. man bekommt per Default keinen Marker mehr und muss ihn mit einem CSS Counter nachbilden. Eine display-Option ˋinline-list-itemˋ gibt's nicht, selbst in der kaum unterstützten Zweiwort-Syntax nicht, weil ˋlist-itemˋ und ˋinlineˋ beides outer-styles sind.

Ist das also eine Heilung? Oder eher eine Transplantation noch größeren Übels? Was sagen die Semantik-Experten dazu?

Ist eine Liste, die (a) inline, (b) mit Listenmarkup erzeugt und (c) mit CSS zurechtgetrimmt wurde - also sowas wie handgemacht in diesem Absatz zu finden - sinnvoll?

<div class="ersatz-paragraph">Ein frisch gegrillter Hamburger ist <ol><li>heiß,</li> <li>fettig</li>
 und <li>furchtbar lecker</li></ol>. Also: Mahlzeit :)</div>

.ersatz-paragraph {
  margin: 0.5em 0;
}
ol {
  padding: 0;
  display: inline;
  counter-reset: liste;
}
li {
  display: inline;
}
li::before {
  content: '(' counter(liste, lower-alpha) ') ';
  counter-increment: liste;
}

Das visuelle Erlebnis dieser HTML/CSS Kombi ist stimmig. Aber ist es auch brauchbar?

Rolf