span hacer ejemplos div como html paragraph

html - hacer - ¿Es la etiqueta<div> alguna vez una alternativa indeseable a la etiqueta<p>?



p html (7)

Veo que la etiqueta <p> usa mucho en el código de otros, pero nunca la he usado en mi propio trabajo.

Me pregunto qué ventaja da esto al usar una etiqueta <div> ?

  1. ¿Hay algún beneficio que pueda obtener al incorporar la etiqueta <p> en mis páginas?

  2. ¿Hay alguna desventaja al usar solo etiquetas <div> sin <p> ?


¿Hay algún beneficio que pueda obtener al incorporar el

etiqueta en mis páginas?

Sí, siempre que lo uses correctamente, porque el uso de HTML semántico siempre es un beneficio.

Hay varias razones por las cuales esto es así, pero la principal para las personas que necesitan una explicación rápida es el SEO. Los motores de búsqueda entenderán mejor tu página si usas HTML semántico.


Ambas etiquetas tienen un propósito diferente.

  • p indica un párrafo, generalmente para organizar contenido (texto e imágenes, en su mayoría)
  • div, por otro lado, es un espacio rectangular en el lienzo, generalmente con fines de diseño.

Ejemplo: pondría su panel de navegación en un div, facilitando el desplazamiento de la izquierda a la derecha de la página, o cambiando a un diseño de 3 columnas. Las diferentes secciones de su navegación (primero la navegación general del sitio, luego los enlaces directos específicos a la publicación más reciente del blog o lo que sea) se pueden separar colocándolos en párrafos diferentes.

(Lo sé, mal ejemplo, porque la navegación está mejor representada por listas desordenadas, pero qué pasa).

En respuesta directa a su pregunta, le dan la ventaja de diferenciar entre organizar su diseño y organizar su contenido, de manera que quede claro en la fuente HTML.


DIV indica una sección separada en una página, que no está conectada semánticamente a las otras. Con las etiquetas P, indica que este fragmento de texto se divide en párrafos, pero sigue siendo una sola entidad.

AGREGADO: con "semántica", la gente generalmente se refiere a la posibilidad de extraer información de HTML en cuanto a lo que representan los diversos elementos de una página y cómo se relacionan entre sí, en lugar de tratar todo el HTML como un simple marcado que se va a representar. Por ejemplo, cuando hace menús, se recomienda que use los UL (lista desordenada) para ese propósito, porque será posible aprender del marcado que todos los LI (elementos de la lista) contenidos en una lista particular probablemente significan opciones de elección de mismo nivel. Sé que es útil para los lectores de pantalla para personas con discapacidades que intente hacer su marcado lo más rico posible en semántica.

Si no está preocupado por esto, entonces prácticamente no hay diferencia para el resultado generado, ya sea que utilice DIV o Ps. Puedes diseñar ambos con CSS para lograr la misma apariencia.

El HTML semántico todavía no es "el bien absoluto" por el que hay que luchar. Para muchas personas, la semántica no agrega ningún valor, ya que solo desean que sus páginas se representen correctamente. Es por eso que la discusión duradera sobre si usar tablas para el marcado (y agregar semánticas a las que no pertenece) o apegarse a CSS no va a terminar pronto.


Las etiquetas p son para párrafos. Las etiquetas p a menudo contienen un estilo CSS adicional con respecto al contenido textual que se incluye en ellas, y este estilo se puede definir en varios lugares en la documentación de css. por ejemplo, ap usualmente tiene un poco de espacio extra debajo. Si intentas colocar algo con etiquetas p, terminarás con un relleno desigual.

Es mejor usar divs si desea tener más control sobre el contenido de su página desde una perspectiva programática. adherirse a divs para todas las inquietudes de diseño también le permitirá usar etiquetas p exclusivamente para párrafos.


Más allá de la semántica de la misma (que son importantes), también querrá considerar los problemas de validación. De acuerdo con la especificación HTML4, no está permitido anidar otros elementos a nivel de bloque ( <div> , <ul> , otros <p> , etc.) dentro de un <p> sin invalidar su HTML.

He visto varios casos en los que los analizadores elegirán cerrar prematuramente <p> para permitir que comience el otro elemento de bloque anidado.


Si está etiquetando contenido para poder distribuirlo con CSS, probablemente quiera <div> ; <p> debe usarse para indicar un párrafo de texto y eso es todo.


p significa "párrafo", div significa "división". Eso es tan complicado como se pone. Es una forma de decirle a los motores de búsqueda, a los raspadores, a las herramientas, etc., que se trata de un párrafo de texto.

div no es deseable cuando en realidad estás marcando un ''párrafo'' de texto.