Disposición con divs ... ¿puede tener demasiados?

Question

¿Cuál es la mejor práctica para desarrollar un diseño? Es mejor limitar los divs? Estaba mirando a través del html/css de algunos sitios populares y todos parecen tener divs dentro de los divs. Por ejemplo, un div para toda la página, un div para la barra superior, un div dentro de la barra superior para el logotipo, barra de búsqueda, etc.

¿Es esta una buena práctica? Supongo que es más fácil ubicar todos los divs correctamente y colocar los elementos necesarios dentro de los divs. Es lo que he estado haciendo hasta ahora pero quiero asegurarme de estar aprendiendo el enfoque correcto.

Se agradece cualquier ayuda sobre esto. ¡Gracias!

Answer 1

Use <div> s cuando necesite divide (para eso se supone que se usan las secciones div) de su página. Encabezado/pie de página del contenido, por ejemplo, o publicaciones individuales en un blog.
Sin embargo, no debe usarlos cuando semánticamente otro elemento tenga sentido.

Si el archivo en el blog mencionado anteriormente solo mostraba un resumen de dos líneas de cada publicación en el archivo, una lista ordenada podría tener más sentido ya que está definiendo una lista de elementos que están en orden. Los elementos <li> también son elementos de bloque y se pueden diseñar de la misma manera.

A veces, tendrá sentido anidar <div> etiquetas, y a veces no deberías.
Como prueba básica, imagina que tu página está siendo analizada por un lector para un usuario con discapacidad visual. Necesita saber qué hay en cada nodo del documento para poder anunciarlo correctamente. No le importa cuáles sean sus necesidades visuales de CSS, solo quiere analizar el discurso con la mayor precisión posible.

puntos básicos a tener en cuenta:

• Escribe el código HTML principalmente para la estructura no visuales
• la persona que ve su sitio web no podría estar usando el CSS
• la persona que ve su sitio web no puede estar usando una navegador web convencional
• Siempre puede modificar su estructura si el CSS no funciona, siempre que siga siendo el mismo semánticamente.

Answer 2

A <div> por definición es un elemento sin sentido, por lo que no importa cuántos de ellos tenga.

Sin embargo, debe tener <div> s en su página, siempre que tenga sentido, y no usarlos si hay elementos más adecuados para el trabajo (semánticamente).

<div>This is a paragraph of text</div> 

en realidad debería haber

<p>This is a paragraph of text</p> 

y tal.

Answer 3

Hay un nombre para este tipo de "código olor" en HTML: Divitis.

Debe ampliar su conocimiento sobre los significados semánticos para las etiquetas en HTML. Puede comenzar leyendo this article, pero está más centrado en html4.01 y xhtml. Hay varias etiquetas nuevas en HTML5 y pocos cambios en el significado semántico de las etiquetas HTML4 existentes.

Answer 4

La gran pregunta es generalmente si se usan divs o tablas. Las tablas crean muchos dolores de cabeza, algunos de los cuales no se pueden evitar. Pero los divs también pueden tener sus problemas.

Independientemente de lo que utilice, el nivel de anidación puede dificultar la comprensión de la página. Por lo tanto, debe favorecer los niveles más bajos de anidación necesarios. Al mismo tiempo, intentar esforzarse para no anidar también puede dificultar la comprensión del HTML.