¿Cuál es la forma correcta de poner listas dentro de un párrafo en HTML5?

Question

Obtengo la explicación técnica de por qué un elemento <p> no puede contener un elemento <ul>. Desafortunadamente, esto no me ayuda cuando esa es la estructura del contenido.

En meta, entiendo ni

• la explicación semántica, ni
• la estructura recomendada

para los casos en que realmente quiere mostrar una lista de elementos "en línea" con normalidad contenido.

This page sugiere que o bien la separación de la lista de los párrafos:

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

o el uso de una etiqueta alternativa para el párrafo:

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

Pero ambos me parecen terribles cortes que hacen una burla del supuesto contenido semántico de HTML5.

En el primer caso, ¿cómo es la etiqueta <p> semánticamente significativa? Sin mencionar la dificultad práctica de diseñar correctamente esto si quiero eliminar el espaciado alrededor de la lista (y luego si tengo otras listas que realmente son bloques de contenido separados - ¡oy!)

En el segundo caso, si Necesito tener un <div> que significa "este es un párrafo de contenido". Podría simplemente dejar <p> por completo, en lugar de tener que ir y venir dependiendo del contenido que aparece en el párrafo.

ISTM que la versión más semánticamente significativa podría ser algo como:

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

con los vanos de estilo como bloques o elementos de la lista (y quién sabe qué otros ajustes) para obtener la representación derecha. Prácticamente, esto suena como una gran cantidad de agravación.

¿Hay alguna buena recomendación para generar este tipo de contenido?

Edición

Esto no es realmente tan difícil de peinar, lo que parece. No estoy seguro de si hay una manera de recoger todos los valores por defecto del navegador, pero puedo replicar el estilo de lista por defecto (en OS X Chrome, al menos) con:

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

Answer 1

Para mí, este es un ejemplo de listitis, o ver cada secuencia de cosas como una lista que necesita marcarse como tal.

Mi primer enfoque sería para marcar lo que tiene como:

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

Si es necesario aplicar un estilo común a dichos elementos, entonces el gancho de estilo apropiado es <span> como que tiene en su último ejemplo . Sin embargo, no usaría li como nombre de clase; si cada fragmento de texto constituye un elemento de la lista o no, no es muy significativo.Siempre es difícil elegir los nombres correctos de clase sin conocer el contenido general de la página y cómo se usa en contexto, pero posiblemente topic sea una opción adecuada. Por lo que el margen de ganancia se convierte en

<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

Me parece que si usted está empleando un ul o ol que está terminando con eficacia el párrafo (u otro elemento) que precede a menos que esté anidando listas. Si realmente era una frase y esos artículos eran en línea (y en el caso que usted propone, creo que todo lo que realmente es una pena), a continuación, que acababa de enumerarlos a cabo dentro del <p> por comas como delimitadores:

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

Si realmente quiere balas, tal vez un título sería más apropiado:

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