Nida listas en párrafos en html

Question

Parece que html (estricto) no permite anidar ningún elemento no en línea dentro de un <p>, pero ¿cómo se supone que debo representar un párrafo que contiene una lista (algo que ocurre a menudo en textos naturales). He visto tres respuestas que parecen insatisfactorias:

• Las listas no deben aparecer dentro de los párrafos. (No voy a entrar en un debate cultural, pero ciertamente espero que html no se convierta en el lugar para dictar el estilo de escritura.)
• Separe el texto en un párrafo, luego en una lista y luego en un segundo párrafo con el post-texto. Esto se ve mal porque ahora tengo <p> fragmentos que son partes de párrafos, y eso parece malo para un marcado que está tratando de moverse en una dirección más semántica.
• Falsos párrafos usando <div class="mypara"> - que parece una mala forma de eludir todo y renunciar al uso del marcado con la semántica adecuada para el texto.

¿Hay alguna otra forma de hacer esto que sea semánticamente correcta y válida?

Answer 1

Los párrafos en HTML 5, a partir del borrador de trabajo más reciente, se definen como elementos de flujo que pueden contener solo elementos de fraseo. Las listas también se definen como elementos de flujo y no pueden incluirse en los párrafos. Independientemente de lo que piense que debería ser la definición de párrafo, esta es la definición formal del término en HTML, y creo que es poco probable que cambie.

Hay dos posibilidades que usted podría considerar además de los dos que usted ha mencionado:

• consideramos que alcanza para un elemento de flujo más amplio alcance que el párrafo si se aplica, como section, nav, header, footer, o article.
• Utilice un enfoque híbrido: ajuste la secuencia p – ol – p con un div de su elección que aplique un formato común al conjunto.

En lo que va div, la especificación HTML 5 recomienda claramente que debe ser un elemento de "último recurso", ya que no lleva el significado semántico de la manera que lo hacen otros elementos HTML, y puede que no sea tan fácil de usar en agentes de usuario alternativos. Siguiendo este consejo, no usaría div con el costo de p para el texto del cuerpo si la semántica es importante para usted. Sin embargo, puede ser útil para asegurarse de que el uso de varios párrafos no se vuelva demasiado entrecortado visualmente.

Answer 2

No creo que la etiqueta html <p> esté destinada a controlar las expresiones idiomáticas de los estilos de escritura reales. Es una forma sencilla de mostrar un trozo de texto de manera ordenada. No creo que esté destinado a simular material impreso. Tendrás que usar una div para este.

Answer 3

La respuesta a su pregunta es obviamente no, porque las especificaciones dicen que no puede hacerlo. Al igual que usted, me gusta mantener la semántica, por lo que generalmente voy con su segunda opción (párrafo, lista, otro párrafo). Sin embargo, fuera de mi cabeza, no puedo pensar en ningún texto donde la lista en realidad no rompa el flujo de texto, por lo que parece que comenzar un nuevo párrafo después de una lista no puede doler.

Answer 4

Supongo que depende de lo que usted considera que es un "párrafo". Es obvio para mí que los diseñadores de HTML de ninguna manera consideran una lista como parte de un párrafo.Y aunque creo que se podría hacer una discusión para cualquiera de las interpretaciones, soy de la opinión de que la especificación es correcta.

Si bien una lista no representa una ruptura en la línea de pensamiento, ciertamente representa un cambio en la voz o el método de pensamiento, que creo que merece un nuevo contenedor semántico.

En la misma línea, un párrafo representa una partición lógica en una escritura. Una lista representa una secuencia de particiones lógicas, y aunque es imaginable que una partición lógica se pueda dividir en más particiones, tiene más sentido simplemente crear una nueva partición (especialmente para una interrupción tan grande en la voz/método).

La semántica puede ser en gran medida subjetiva. Y eso está bien. Sin embargo, en este caso, soy de la opinión de que la especificación HTML representa correctamente la semántica.

Answer 5

¿Hay alguna razón de estilo visual detrás de todo esto? En otras palabras, cuando tiene algo como lo siguiente, ¿está representando visualmente de una manera que no encuentra ideal?

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

Si el problema es demasiado margen después de la P y antes de la UL, a continuación, se puede tratar de un selector de hermanos adyacentes como éste para compensar:

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