1. Inicio
  2. CSS
  3. Diseño Web
  4. HTML
  5. JavaScript
  6. Miscelanea
  7. Recursos
  8. SEO
  9. Usabilidad

div, un elemento de construcciónimagen de ∗FranJa

¿Estás seguro que sabes cuando usar el elemento div?

Todo el que ha visto código HTML conoce el elemento <div>, de hecho es uno de los elementos más usados en HTML, pero a veces, a muchos se les pasa la mano y empiezan a usarlo de más.

es un elemento de construcción

Ya hablaré después del mal uso que se le da al pobre <div>, ahora toca explicar que es y para que sirve este elemento.

<div>, que es y para que sirve.

El elemento <div> es un elemento de bloque y sirve para separar secciones lógicas en una página web.

Por ejemplo, tienes una página que habla de computadoras, con dos secciones Mac y PC, y en cada sección describes sus características.

Imagina que esta es la estructura de tu página:

ejemplo de uso de la etiqueta div

Ahora, debería haber una forma de diferenciar esas secciones en tu HTML, y de hecho la hay. tienes a tu buen amigo, el elemento <div>.

Lo que hay que hacer primero es encerrar cada sección entre <div> y </div>, tu página quedaría así.

ejemplo de uso de la etiqueta div

Ya tienes separadas ambas secciones, pero parece que falta algo, separar secciones así nada más no dice mucho, lo que hay que hacer es darle más significado.

Para eso tenemos al atributo id, entonces, para que el HTML de esa página describa correctamente su contenido, sólo tenemos que agregar un id a cada div de la siguiente manera: <div id="pc"> y <div id="mac">.

Y aquí está el resultado.

ejemplo de uso de la etiqueta div

Pero ahí no acaba todo, supón que el elemento <h1> que aparece arriba sea una cabera, y el ultimo párrafo <p> sea un pie de página (footer).

Estas también son secciones lógicas así que se podrían marcar con <div>s agregando sus respectivos atributos id.

ejemplo de uso de la etiqueta div

Este marcado con divs es básico, de hecho se le puede dar mayor significado usando ids más semánticos, pero eso quedará para el siguiente post.

Recomendación final

No abuses de los <div>s. Úsalos sólo para marcar secciones lógicas en tus páginas para hacerlas más claras y poder darles estilos específicos usado CSS.
Agregar <div>s sin ninguna razón sólo hará tu código mucho más complicado y no te dará ningún beneficio.

Etiquetas:

Comentarios

deja un comentario

  1. Avatar de Pablo Cardenas Gismondi Pablo Cardenas Gismondi

    Después de pasear por varios sitios buscando una respuesta encontrar tu blog es un alivio: claro, conciso, directo, valioso.
    Me da gusto que un compatriota sea administrador de este lugar.
    Gracias Germán, de veras,

    Pablo

  2. Avatar de Germán Germán

    Muchas gracias Pablo!

  3. Avatar de gonzalo gonzalo

    la mejor explicacion que pude encontrar en la red felicidades y gracias

  4. Avatar de gerleyc gerleyc

    gracias...la explicación es antitontos...

  5. Avatar de matias matias

    Excelente explicacion sobre los Div antes de llegar aca no encontre absolutamente nada

    un abrazo!

  6. Avatar de gustavo gustavo

    hola... un web site totalmente amigable y concreto...
    pero me hubiera gustado que compartieras con nosotros como podemos utilizar la función Id del div...
    es decir que nos des la opción de mostrar y/O ocultar nuestros DIV.

    gracias

  7. Avatar de hesteva hesteva

    hola amigo jejeje,,, no creas ke nos pusimos de acuerdo en alagarte pero sinceramente tu explicacion sobre divs es muy concreto. me gustaria saber mas sobre div ke puedo hacer

  8. Avatar de Tere Tere

    Sinceramente, para aquellos que tenemos ganas de aprender, tu página es la mejor. Simple y sin dar las cosas por sobreentendidas. Una vez más FELICITACIONES!

  9. Avatar de Machetron Machetron

    Excelente blog, explican de una manera sencilla y amigable a la vista de forma que resulta simple de entender.

Deja un comentario

Algunos recursos para Diseñadores Web

Firebug
Genial extensión de Firefox que permite ver y editar HTML y CSS de cualquier página, entre otras cosas.
Web Developer Toolbar
Extensión de Firefox, agrega una barra de menu con muchas herramientas utiles para diseño y desarrollo web.
YSlow
Complemento para Firebug creado por Yahoo, da estadísticas de la velocidad de carga de la página así como sugerencias para mejorarla (requiere Firebug).
W3C Markup Validation Service
Valida tu HTML o XHTML, una herramienta indispensable.

Entra a la página de recursos para diseñadores web y mira la lista completa

¿Quien escribe Aprendiendo Web?

Germán MartínezHola, soy Germán Martínez, diseñador web y fundador de PreZentit.com, la primera aplicación web 2.0 creada en Perú.

La idea de Aprendiendo Web, es ser una fuente de información en español de estándares y buenas prácticas, así como de las últimas tendencias en diseño web.

Me apasiona el (X)HTML, CSS, SEO y todo lo que tenga que ver con diseño y desarrollo web.

-12.126668, -77.029910