Etiquetas HTML 'contenedor': uso adecuado?

Question

Durante algún tiempo he estado creando sitios web, pero nunca he visto discusión sobre el uso correcto de las etiquetas de contenedor. He visto diferentes tipos de contenido en las etiquetas de colección, pero por lo general parece que el creador de la página solo elige un estilo que les gusta y se queda con él.

La principal discrepancia en mi mente es la que existe entre

<p> 
<div> 

pero también me gustaría opiniones con respecto a

<span> 

y cualesquiera otras se me puede olvidar.

Answer 1

HTML fue creado originalmente para poner el contenido de los documentos en una especie de estructura comprensible para los ordenadores. Teniendo esto en cuenta, se supone que la etiqueta p contiene todo lo que se estructuraría como un párrafo si el contenido de la página se convirtiera en un documento impreso. Los elementos div y span se reservan como contenedores de uso general para facilitar el formateo y la agrupación de elementos relacionados para proporcionar niveles adicionales de estructura, tal vez correlacionando a las páginas en un documento de texto.

En algunos casos, p etiquetas debe contener otros elementos, como el ancla (a), imagen (img) y otros elementos en línea, ya que se relacionan directamente con el contenido del resto del párrafo y tiene sentido agruparlos de esa manera, o el texto del resto del párrafo proporciona una descripción más detallada.

Sin embargo, si no hay una descripción adicional de esos elementos, no tiene sentido colocarlos en un párrafo simplemente como un contenedor conveniente; un div sería más apropiado. En general, se supone que un párrafo contiene un párrafo de texto y cualquier elemento directamente relacionado o descrito. Nada más tiene mucho sentido en un párrafo.

---

ACTUALIZACIÓN: HTML5 también añade un número de otros elementos semánticos "contenedor", incluyendo article, nav, header, section, y aside.

Answer 2

Creo que los creadores de páginas deben usar el marcado semántico, lo que significa que el marcado que crean debe comunicar el significado (y no la presentación). <div> y <p> tienen diferentes significados. El primero se usa para definir una división (o sección) de una página HTML, el último para definir un párrafo de texto.

Answer 3

creo, el significado de las etiquetas es algo como esto:

<p>Paragraph, usually just text</p> 

<div>A block, containing anything</div> 

<span>Just a simple non-blocking wrapper</span> 

Answer 4

<p> es un elemento en bloque que debe contener un párrafo, compuesta de texto, los elementos en línea que modifican ese texto (<p>, <a>, <abbr>, etc.), y las imágenes.

<div> es un elemento de nivel de bloque utilizado para dividir la página, casi siempre junto con estilos CSS.

<span> ... bueno, honestamente no uso esta etiqueta tan a menudo.Es un elemento en línea, y lo uso generalmente cuando me gustaría aplicar estilos a una parte del texto que no se beneficiaría de usar algo con más significado, como las etiquetas <strong> y <em>.

Answer 5

Debía ver <span> y <div> como el "tofu de webdeveloppement", ya que no tiene ningún sabor real pero puede hacer prácticamente cualquier cosa con él.

(X) HTML etiquetas definen lo que el texto que están circundante es. Es él y la dirección, es un enlace, es un párrafo, etc. ...

<div> y <span> son simplemente formas de llegar a partes de su sitio que normalmente no puede acceder. Como cuando intentas cambiar el tamaño de un | símbolo. La forma más rápida que he encontrado es poner un lapso alrededor de él, darle una clase y luego implementar el CSS.

Eso es lo que son buenos para, en mi opinión. Me interesaría escuchar más o incluso correcciones sobre lo que he escrito aquí.

Answer 6

La diferencia entre estos tres (y muchos otros) etiquetas es su significado semántico. El estándar HTML incluye etiquetas con ambos significados semánticos específicos (<p> para los párrafos, <em> para el texto subrayado, etc.) y las etiquetas sin significado semántico.

Estos últimos son <div> y <span>, que se utilizan para identificar el contenido por bloques o a nivel de línea que necesita ser identificado (usando, por ejemplo un atributo class= o id=), pero para los que no existe una etiqueta semánticamente-específica . Por ejemplo, uno puede escribir <p>Hi, my name is <span class="name">John Doe</span>.</p> - lo que indica que se trata de un párrafo (que el navegador ya tiene una idea de cómo manejar) y que parte de su contenido es un nombre (que significa absolutamente nada al navegador a menos CSS o JavaScript lo usa)

Estas etiquetas son por lo tanto muy útil tanto en la adición de información adicional a un documento HTML que no encaja dentro de las etiquetas semánticas suministrados por la norma (ver the hCard specification para un excelente ejemplo) y para aplicar visual (CSS) o estructura funcional (JavaScript) a un documento sin alterar su semántica.

Answer 7

Parece que usted necesita leer el HTML specification

The p element:

El elemento p representa un párrafo.

The div element:

El elemento div tiene ningún significado especial. Representa a sus hijos. Se puede usar con los atributos class, lang y title para marcar la semántica común a un grupo de elementos consecutivos.

The span element:

El elemento span no significa nada por sí mismo, pero puede ser útil cuando se utiliza junto con los atributos globales, por ejemploclass, lang, o dir. Representa a sus hijos.

La principal diferencia entre div y span es ese lapso es flow content, phrasing content y palpable content, mientras que un div sólo es flow content y palpable content.

Esencialmente esto se reduce a:

div elementos son elementos de bloque, y normalmente sólo puede colocarse dentro de otros elementos en bloque, mientras que span elementos son elementos en línea, y puede ser colocado dentro de la mayoría de los otros elementos .

The HTML spec defines which elements are acceptable as descendents of each element.