Nota: Si no sabes lo que es un elemento/tag o cómo debes utilizarlo, te recomiendo que leas el tutorial "Tags y atributos en HTML", que puedes encontrar en la sección de tutoriales HTML.
Tabla de contenidos
Bypass table of contentsEl elemento HTML div es un contenedor a nivel de bloque para otros elementos. Por sí mismo, no tiene significado alguno a nivel presentacional o semántico, exceptuando que, al ser un elemento a nivel de bloque, los navegadores mostrarán un quiebre de línea antes y después de su contenido.
Los elementos HTML div adquieren su potencual al ser usados conjuntamente con hojas de estilo, ya que resultan muy útiles para asignar atributos presentacionales a bloques enteros de contenido.
Otro uso útil para este elemento, y tal vez el más importante, es el de establecer la distribución o el diseño (en inglés "layout") del documento. Los elementos DIV han venido a reemplazar a la antigua forma de establecer el diseño del documento, que usaba tablas para organizar la distribución del contenido. Estos deseños con tablas hacían uso erróneo del elemento HTML table, cuyo propósito no es otro que representat información tabulada.
El atributo "align" de este elemento ha sido formalmente desaprobado en HTML 4.01. Por lo tanto, su utilización ya no es recomendable.
A continuación, hay algunos ejemplos del uso del elemento HTML div, donde asigna propiedades presentacionales a otros lementos tanto a nivel de bloque como de línea.
Nota cómo el primer DIV está flotando a la derecha del contenido. Esta es una característica muy útil a la hora de diseñar la distribución de una página.
Este elemento es muy útil al diseñar "layouts" sin la utilización de tablas.
No olvides revisar su referencia en HTMLQuick.com.
El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser único en todo el documento y puede ser usado para referirse a este elemento en otras instancias (por ejemplo, desde un script del lado cliente).
El atributo "class" asigna un nombre de clase (o una lista de nombres de clases separadas por espacios) al elemento contenedor. Es usado junto con hojas de estilos y le dice al navegador la clase (o clases) a las que el elemento está asociado.
Una clase da atributos presentacionales a los elementos (lee más en el tutorial "Hojas de estilo en cascada").
Este atributo es utilizado para definir atributos presentacionales para el elemento contenedor, y su valor debería estar compuesto por propiedades de hojas de estilo. Aunque en algunos casos es particularmente útil, es una mejor práctica poner los atributos presentacionales en archivos externos, relacionándolos a los elementos a través del atributo "class". De este modos, se mejora la separación de las partes semántica y presentacional de tu documento.
Puedes encontrar más información acerca de los atributos presentacionales en el tutorial "Hojas de estilo en cascada".
El propósito de este atributo es proveer un título para el elemento. Su valor debe ser una descripción corta y precisa del contenido del elemento. Habitualmente, los navegadores muestran el contenido de este atributo en un recuadro al posar el mouse encima del contenido del elemento por un pequeño período de tiempo.
Especifica el lenguaje del contenido de un elemento. El valor por defecto es "desconocido".
Al escribir documentos XHTML 1.0, el atributo usado para especificar el lenguaje de un elemento es "xml:lang". Para compatibilidad con los dos tipos de estándar ambos atributos pueden ser usados simultáneamente como en el ejemplo a continuación. Nota que en XHTML 1.1, el atributo "lang" ha sido completamente reemplazado por "xml:lang" y su uso ya no es válido.
Este atributo indica la dirección en que el texto del elemento debe ser leído. Esto incluye al contenido, los valores de los atributos y las tablas. Tiene dos valores posibles que son insensibles a mayúsculas/minúsculas:
Este atributo ha sido desaprobado en HTML 4.01. Por lo tanto, su uso ya no es recomendado.
Define la alineación horizontal de su contenido. Los valores posibles, insensibles a mayúsculas/minúsculas, son:
Ve a la lista completa de eventos en HTML.
Diseño y desarrollo: Latitud29.com