¿Cuál es la diferencia entre el contenido de fraseo y el contenido de flujo?

Soy nuevo en HTML y CSS y me gustaría saber la diferencia entre el contenido de flujo y el contenido de fraseo. Además de la documentación oficial W3, la documentación de MDN es útil y establece:

El contenido de flujo se define de la siguiente manera:

Los elementos que pertenecen a la categoría de contenido de flujo suelen contener texto o contenido incrustado.

El contenido de fraseo se define de la siguiente manera:

El contenido de fraseo define el texto y el marcado que contiene. Las corridas de contenido de redacción componen párrafos.

Sin embargo, la documentación ofrece muy poca diferencia entre los dos, ¿alguien puede aclarar cuáles son las principales diferencias entre el contenido de fraseo y el contenido de flujo?

La manera más fácil de recordar, es que si puede estar dentro de una oración, es un contenido de fraseo.

El texto puede estar dentro de una oración, por lo que es fraseo.

Un bit enfatizado puede estar dentro de una oración, entonces es fraseo.

Una imagen puede ser dentro de una oración, entonces es fraseo.

Un subtítulo o un artículo no pueden estar dentro de una oración, por lo que no son fraseos.

Un enlace puede estar dentro de una oración, por lo que es fraseo. Pero a partir de HTML 5, también se permite que un enlace contenga bloques enteros de texto, en cuyo caso no es fraseo.

El contenido de la redacción se divide en tres categorías:

  1. Contenido que es reemplazado por algo visualmente. (Por ejemplo, como se reemplaza por una imagen.
  2. Contenido que contiene texto dentro de una ejecución.
  3. Contenido que proporciona metadatos sobre una pieza específica de texto dentro de una ejecución. (Por ejemplo, cuando se utiliza con itemprop lugar de en que define una relación entre un documento como un todo y el recurso vinculado a).

El contenido de flujo incluye contenido de fraseo, pero también elementos como

y > que definen una ejecución completa de texto,

que contiene una o más ejecuciones y

que contiene filas de celdas que contienen corridas de texto.

Es muy importante en CSS avanzado conocer los diferentes tipos de contenido y no solo la definición del mismo, o solo la lista de elementos que se incluyen en un cierto tipo de contenido, sino también "por qué" un determinado elemento entra en una categoría determinada y cuál es la principal diferencia entre las categorías de contenido similares, en el caso de mi pregunta, cuál es la diferencia entre "Contenido en fase" y "Contenido de flujo".

No estoy del todo de acuerdo.

Es absolutamente vital para HTML básico saber esto. Es lo primero que debe enseñarse en HTML después de escribir Hello

Hello World!

en un editor de texto y abriéndolo en un navegador, y "hay varios elementos diferentes en HTML". Puede que no sea completamente claro hasta que uno haya aprendido los elementos que son ejemplos de cada uno, pero es importante darse cuenta ya que muchas cosas simplemente no tienen sentido de lo contrario y hace la diferencia entre un lenguaje de marcado simple con elementos y atributos fáciles de recordar y una sopa de tags desordenada donde nunca puede recordar por qué los validadores dicen que lo está haciendo mal.

Ahora, sin duda, su CSS generalmente se derivará de su semántica, y los valores predeterminados también se desprenden de ellos (el contenido de frase más visible es un elemento reemplazado o display: inline; mayoría del otro contenido de flujo es display: block; se relaciona bastante obviamente con la semántica (por ejemplo, tr: {display: table-row;} ).

Pero debido a que el HTML es donde primero piensas en la semántica, al escribir el CSS puedes enfocarte más en el renderizado y, hasta cierto punto, liberarte de esa preocupación. Ciertamente, la semántica correcta generalmente no debería convertirse en una restricción sobre CSS más allá del simple hecho de que obviamente desea un diseño visual que ayude a transmitir su mensaje.

Entonces, por ejemplo, solo porque

se define como "un párrafo" y en nuestra cultura los párrafos se escriben hoy como bloques de texto con un margen vertical entre ellos o una sangría en la primera línea, no significa que tengamos que sigue esa regla Podemos diseñar nuestros párrafos en estilo tardomedieval como aquí con párrafos corriendo juntos separados por pilcrows.

No es probable que quiera hacerlo, pero ciertamente puede. Entonces, si un buen CSS se basa en la semántica de los elementos, también nos libera de ellos en el sentido de que no tenemos que tener una semántica incorrecta para que algo se vea (o suene) como queremos.

Creo que esto se puede considerar el punto principal sobre el contenido de fraseo:

El contenido de la redacción es el texto del documento, así como los elementos que marcan ese texto a nivel de intrapárrafo. Ejecuciones de contenido de frase de párrafos.

(Resalta por mí)

El contenido de fraseo es principalmente lo que usted (podría / debería) poner en los párrafos. Para las partes más largas del contenido de texto dentro de su página, la mayoría de ellas deberían organizarse en párrafos. Los párrafos son el nivel más básico de contenido de texto estructurado, igual que lo tendría en un texto escrito tradicional en un libro o similar.

El contenido de flujo es una categoría más amplia. Como puede ver en el diagtwig de Venn en la página MDN , contiene todas las demás categorías de contenido (con la excepción de los metadatos, con se muestra como parcialmente fuera de él, lo que tiene sentido, ya que muchos metadatos entran en el elemento principal.)

Por lo tanto, el contenido de la redacción es en su mayoría dentro del nivel de párrafo, mientras que el contenido de flujo es básicamente lo que sea que desee poner en el body directamente, o en cualquiera de los elementos de estructuración “más grandes”.

Verá que la lista de elementos para el contenido de flujo y la lista de elementos para el contenido de frase se superponen en partes grandes, ya que ambos contienen elementos tales a , img , input , label , span , etc. Todos esos elementos es posible que desee poner dentro un p párrafo por una buena razón, pero también podrían ser hijos del body directamente, o nesteds en otros elementos, como enlaces dentro de una lista (no) ordenada con el propósito de marcar una lista de navegación, un img que es el el logotipo del sitio (y, por lo tanto, no forma parte de un párrafo), etc. Por lo tanto, muchas de esas cosas pueden ser tanto dentro de los párrafos como fuera de ellos, dependiendo del significado específico del contenido que marcan.

Los elementos que el contenido de fraseo no abarca, pero que son solo parte del contenido de flujo, son aquellos que no están permitidos dentro de un párrafo, p por supuesto, los diferentes niveles de título, section , article , aside , div , form , footer , fieldset , table , etc. También puede llamar a estos los principales elementos estructurales de “nivel superior”.

Si está familiarizado con la “vieja” clasificación de HTML 4.01 de los elementos en línea y en bloque , entonces esto no debería presentar demasiados problemas. La mayoría de lo que se categorizó en línea se permitió en los párrafos, mientras que no se permitió ningún otro elemento de bloque dentro de un párrafo. (Por supuesto, HTML 5 agregó algunos elementos nuevos, que por lo tanto no formaban parte de ninguno en línea o bloque antes).

Utilicé párrafos para hacer hincapié en esto principalmente, pero también es cierto para los elementos de titulares. Además, solo se les permitió contener elementos en línea en HTML 4.01, y ahora su modelo de contenido también está redactando el contenido. Poner un div , footer , table o párrafo dentro de un titular simplemente no tendría sentido; poner un enlace o imagen allí, sin embargo, puede tener sentido en muchos casos fácilmente.

Y, por supuesto, este tipo de “goteo” también. Para un elemento como em (ejemplo aleatorio), el modelo de contenido también está redactando el contenido. De lo contrario, no tendría sentido: para un elemento em dentro de un párrafo, de repente permitir elementos que el párrafo en sí no tiene permitido contener, no sería sensato en absoluto.

(Sin embargo, el elemento a ha recibido un tratamiento especial en HTML 5. Anteriormente solo permitía contener elementos en línea, ahora puede contener tanto contenido de fraseo como contenido de flujo – se permite tener una a contenga un div o un párrafo. Depende del contexto por supuesto, si el a es un antecesor de un elemento que solo permite redactar el contenido, entonces solo puede contener contenido de frase. Este cambio se realizó debido a la demanda de los desarrolladores para poder usar secciones más grandes de contenido estructurado para vincular en otro lugar, es posible que desees que un enlace contenga un título más texto adicional [párrafo]. Antes de HTML 5, la gente tenía que “falsificar” esto usando elementos en línea dentro del enlace y formateándolos a través de CSS para que pareciera un título y párrafo)

Entonces, aunque HTML 5 ha dividido las dos categorías básicas de bloque y en línea en varias categorías, el flujo y el contenido de fraseo son los dos más importantes de esos, creo, y se puede decir que son los “sucesores” de bloque y en línea. hasta cierto punto.


Y cuando hay dudas, siempre existe la especificación para buscar cosas; y el validador le dirá si anidó los elementos de una manera que no está permitida. Te recomendaría que siempre revises tus páginas usando esta herramienta, y con el tiempo, todo esto vendrá más naturalmente por sí mismo.

Estas categorías se crean cuando se trata de dar un significado semántico al marcado para describir mejor el contenido del mismo.

El contenido de fraseo define el texto y el marcado que contiene y es una subcategoría del contenido de flujo,
pero también hay otros subgrupos como headers y sections

Incluso si no es muy descriptivo, la documentación proporciona la lista exacta de elementos que pertenecen a las categorías respectivas.

CONTENIDO DE PHRASING

El contenido de la redacción está compuesto por contenido de texto, elementos de contenido incrustado y elementos de fraseo, posiblemente intercalados con comentarios HTML y / o espacios en blanco.

Estos elementos HTML pueden usarse en código HTML donde se espera contenido de flujo o contenido de fraseo, con algunas posibles restricciones en casos específicos.

Contenido de flujo

El contenido de flujo en HTML está formado por elementos de flujo, contenido de fraseo y contenido de texto, posiblemente intercalados con comentarios HTML y / o espacio en blanco.

Contenido de flujo Elementos restringidos para uso solo cuando se permite el contenido de flujo Estos elementos HTML se pueden usar solo en código HTML donde se permite el contenido de flujo, con algunas restricciones adicionales en casos específicos. Además, los elementos de texto y HTML clasificados como contenido de redacción también se pueden usar cuando se espera contenido de flujo.