Nidificare gli elenchi nei paragrafi in codice

Question

Sembra che html (strict) non consenta di annidare elementi non inline all'interno di uno <p>, ma come posso riprodurre un paragrafo che contiene un elenco (qualcosa che si verifica spesso in testi naturali). Ho visto tre risposte che sembrano tutte insoddisfacenti:

• Gli elenchi non dovrebbero accadere all'interno dei paragrafi. (Non ho intenzione di entrare in un dibattito culturale, ma spero certamente che l'html non diventerà il posto in cui dettare lo stile di scrittura.)
• Separa il testo in un paragrafo, quindi un elenco, quindi un secondo paragrafo con il post-testo. Questo sembra male perché ora ho <p> pezzi che sono parti di paragrafi, e che sembra male per un markup che sta cercando di muoversi in una direzione più semantica.
• Fake paragraph using some <div class="mypara"> - che sembra un brutto modo per aggirare il tutto e rinunciare all'uso del markup con la semantica corretta per il testo.

C'è un altro modo per farlo che è semanticamente corretto e valido?

Answer 1

I paragrafi in HTML 5, al momento dell'ultima bozza di lavoro, sono definiti come elementi del flusso che possono contenere solo elementi di fraseggio. Gli elenchi sono anche definiti come elementi di flusso e non possono essere inclusi nei paragrafi. Qualunque cosa tu pensi che la definizione di paragrafo dovrebbe essere, questa è la definizione formale del termine in HTML, e penso che sia improbabile che cambi.

ci sono due possibilità che si potrebbe prendere in considerazione oltre ai due che hai citato:

• considerare il raggiungimento di un elemento di flusso più ampio-portata di quelle del punto se si applica, come ad esempio section, nav, header, footer o article.
• Utilizzare un approccio ibrido: avvolgere la sequenza p – ol – p con un div di propria scelta che applica la formattazione comune all'insieme.

Per quanto riguarda div va, le specifiche HTML 5 raccomanda chiaramente che dovrebbe essere un elemento di "ultima istanza", perché non sopporta significato semantico nel modo in cui gli altri elementi HTML fanno, e non può essere così user-friendly in user agent alternativi. Seguendo questo consiglio, non userei div al costo di p per il corpo del testo se la semantica è importante per te. Tuttavia, può essere utile per assicurarsi che l'uso di più paragrafi non diventi troppo visivamente discontinuo.

Answer 2

Non penso che il tag html <p> abbia lo scopo di controllare gli idiomi degli stili di scrittura effettivi. È un modo semplice per visualizzare una porzione di testo in modo ordinato. Non credo che sia pensato per simulare il materiale stampato. Dovrai usare un Div per questo.

Answer 3

La risposta alla tua domanda è ovviamente no, perché le specifiche dicono che non puoi farlo. Come te, mi piace mantenere la semantica, quindi di solito vado con la tua seconda opzione (paragrafo, elenco, un altro paragrafo). In ogni caso, non riesco a pensare a nessun testo in cui la lista non rompa effettivamente il flusso di testo, quindi sembra che iniziare un nuovo paragrafo dopo un elenco non possa far male.

Answer 4

Suppongo che dipenda da ciò che consideri un "paragrafo". È ovvio per me che i progettisti di HTML non considerano in alcun modo una lista come parte di un paragrafo.E mentre penso che si possa fare una discussione per entrambe le interpretazioni, sono dell'opinione che le specifiche siano corrette.

Mentre una lista non rappresenta una rottura in linea di pensiero, rappresenta certamente un cambiamento nella voce o nel metodo di pensiero, che credo meriti un nuovo contenitore semantico.

Allo stesso modo, un paragrafo rappresenta una partizione logica in un pezzo di scrittura. Una lista rappresenta una sequenza di partizioni logiche, e mentre è immaginabile che una partizione logica possa essere divisa in più partizioni, ha più senso creare semplicemente una nuova partizione (specialmente per un'interruzione così grande nella voce/metodo).

La semantica può essere in gran parte soggettiva. E va bene. Tuttavia, in questo caso, sono dell'opinione che le specifiche HTML rappresentino correttamente la semantica.

Answer 5

Esiste un motivo di stile visivo dietro tutto questo? In altre parole, quando hai qualcosa di simile al seguente, viene visualizzato visivamente in un modo che non trovi ideale?

<p>Some paragraph text.</p> 
<ul> 
    <li>First list item</li> 
    <li>Second list item</li> 
    <li>Third list item</li> 
</ul> 
<p>Another paragraph.</p> 

Se il problema è troppo margine dopo la P e prima della UL, allora si può provare un selettore fratello adiacente così da compensare:

p + ul { margin-top: -1em; }