Jaki jest właściwy sposób umieszczania list w akapicie w HTML5?

Question

Mam techniczne wyjaśnienie, dlaczego element <p> nie może zawierać elementu <ul>. Niestety nie pomaga mi to, gdy taka jest struktura treści.

w Meta, rozumiem ani

• semantyczne wyjaśnienie, ani
• zalecana struktura

w przypadkach, gdy tak naprawdę chcą pokazać listę elementów „inline” z normalną zadowolony.

This page sugeruje albo oddzielenie listę z paragrafów:

<p>For instance, this fantastic sentence has bullets relating to</p> 
<ul> 
<li>wizards, 
<li>faster-than-light travel, and 
<li>telepathy, 
</ul> 
<p>and is further discussed below.</p> 

lub przy użyciu znacznika alternatywną dla akapitu:

<div>For instance, this fantastic sentence has bullets relating to 
<ul> 
<li>wizards, 
<li>faster-than-light travel, and 
<li>telepathy, 
</ul> 
and is further discussed below.</div> 

Ale oba te wydaje mi się straszne hacki które czynią pośmiewisko o rzekomej treści semantycznej HTML5. W jaki sposób znacznik <p> ma znaczenie semantyczne? Nie wspominając już o praktycznej trudności w poprawnym ukształtowaniu tego, jeśli chcę wyeliminować odstępy wokół listy (a jeśli mam inne listy, które naprawdę są oddzielnymi blokami treści - oy!)

W drugim przypadku, jeśli Muszę mieć <div>, co oznacza "jest to akapit zawartości" Mogę równie dobrze po prostu upuścić <p> całkowicie, a nie trzeba przełączać się tam iz powrotem w zależności od treści pojawiającej się w akapicie.

ISTM że najbardziej sensowne semantycznie wersja może być coś takiego:

<p>For instance, this fantastic sentence has bullets relating to 
<span class="li">wizards,</span> 
<span class="li">faster-than-light travel, and</span> 
<span class="li">telepathy,</span> 
and is further discussed below.</p> 

z przęseł urządzonych jako blok lub lista przedmiotów (a kto wie, jakie inne szczypie), aby uzyskać świadczenie rację. Praktycznie brzmi to jak strasznie dużo niepokoju.

Czy istnieją jakieś dobre zalecenia dotyczące renderowania tego rodzaju treści?

Edit

To nie jest właściwie wszystko, co trudne do stylu, jak się wydaje. Nie jestem pewien, czy istnieje sposób, aby zebrać wszystkie domyślne ustawienia przeglądarki, ale mogę powtórzyć domyślny styl listy (na OS X Chrome, przynajmniej) z:

span.li { 
    display: list-item; 
    list-style-type: disc; 
    margin-left: 40px; 
} 

Answer 1

Dla mnie jest to przykład z listitis lub widząc każdą sekwencję rzeczy jako listę, która wymaga oznaczenia jako takiego.

Moje pierwsze podejście byłoby oznaczyć co masz jako:

<p>For instance, this fantastic sentence has bullets relating to wizards, 
faster-than-light travel, and telepathy, and is further discussed below.</p> 

Jeśli trzeba zastosować wspólną stylizacji do tych pozycji, a następnie odpowiedni hak do stylizacji jest <span> jak masz w swoim ostatnim przykładzie . Nie używałbym jednak nazwy li jako nazwy klasy; To, czy każdy fragment tekstu stanowi element listy, czy nie, nie ma większego znaczenia.Zawsze trudno jest wybrać prawidłowe nazwy klas, nie znając ogólnej zawartości strony i sposobu jej użycia w kontekście, ale prawdopodobnie odpowiedni wybór to topic. Więc dopłata staje

<p>For instance, this fantastic sentence has bullets relating to <span 
class="topic">wizards</span>, <span class="topic">faster-than-light 
travel</span>, and <span class="topic">telepathy</span>, and is further 
discussed below.</p> 

Answer 2

Wydaje mi się, jeśli jesteś zatrudniania ul lub ol jesteś skutecznie kończąc pkt (lub inny element), który poprzedza go chyba że zagnieżdżanie list. Jeśli to naprawdę było zdanie i te elementy były inline (aw przypadku zaproponowania, myślę, że naprawdę wszystko jest zdanie), to bym po prostu wymienić je w <p> przecinkami jako ograniczniki:

<p>For instance, this fantastic sentence has bullets relating to: 
wizards, faster-than-light travel, and telepathy, 
and is further discussed below.</p> 

Jeśli naprawdę chcesz pociski, może tytuł byłby bardziej odpowiedni:

<h2>For instance, this fantastic heading has bullets relating to:</h2> 
<ul> 
<li>wizards, 
<li>faster-than-light travel, and 
<li>telepathy, 
</ul>