| |
|---|
div en HTML expuesto en un compendio sinóptico muy completo. |
| |
|---|
|
atributo, div, class, id, align, span |
Portafolio de temas tratados en esta publicación |
|---|
 |
Definición y descripción
- Sus etiquetas son:
<div>y</div>(ambas obligatorias). - Está definido como: Elemento en bloque.
- Crea una caja: En bloque.
- Puede contener: texto, párrafos, encabezados, tablas, elementos en bloque o en linea.Incluso otras divisiones, como se explica más adelante en las llamadas Divisiones anidadas
Esto hace ideal a DIV para hacer diferentes clases de contenedores, como capítulo, resumen o nota. Por ejemplo:
<DIV CLASS=nota> <H1>Divisiones</H1>El elemento DIV está definido en HTML 3.2, pero solo el atributo ALIGN está permitido en HTML 3.2. HTML 4.0 agrega los atributos CLASS, STYLE e ID , entre otros.
Ya que DIV puede contener otros contenedores de nivel bloque, es útil para hacer grandes secciones de un documento, como esta nota.
Requiere la etiqueta de cierre.
</DIV>Pero, cabe ahora la pregunta: ¿Cuál es la función de la etiqueta div? La etiqueta <div> define una división. Esta etiqueta permite agrupar varios elementos de bloque (párrafos, encabezados, listas, tablas, divisiones, etc). Expongo más detalles a continuación, respecto a lo que se encuentra en las publicaciones sobre este tema, y que considero de sumo interés (dejo bibliografía al pie de página):
El elemento div es un contenedor genérico de bloque sin un significado semántico en particular. Se utiliza comúnmente en el desarrollo de documentos con propósitos estilísticos, en conjunto con los atributos style y class. También puede resultar útil para proveer atributos comunes a los elementos contenidos por el, como por ejemplo lang o title.
En un documento HTML el elemento "div" permite crear divisiones, también llamadas secciones o zonas. Las divisiones se utilizan para agrupar elementos y aplicarles estilos.
Estos son los atributos mas importante de la etiqueta div:
El resto de los atributos no son usados con frecuencia, ademas se pueden sustituir por las propiedades de CSS.
Los autores deberían considerar a div como último recurso, reservado únicamente para aquellos casos en los que elementos con mayor significado, como main, header, footer, nav o article no son aplicables.
⏫ Ir a Portafolio ⏫
Etiqueta div para qué sirve en HTML
La etiqueta <div> sirve de contenedor de bloque, puede contener varios elementos HTML, incluso otros elementos div a la vez. Cabe señalar que antaño se solía utilizar para organizar las secciones de una página web tales como la cabecera, la navegación o menú, el cuerpo de página, los pies de página, barras laterales, etc. Se le solía poner un atributo id o class con su respectivo nombre como: cabecera, cuerpo, footer, etc. para luego darle estilo con CSS.
Sin embargo desde que apareció HTML5 es mejor emplear sus nuevas etiquetas semánticas de html5 como: header, section, aside, footer o main, entre otras, para organizar la estructura de una página; es común que nos preguntemos para qué y cuándo se usa la etiqueta div en estos momentos.
Es importante puntualizar que Html5 es una versión de HTML que ha incorporado nuevos elementos con los que se pueden definir directamente bloques que anteriormente teníamos que construirlos con la etiqueta <div> e identificarlos, así que html5 ha solucionado gran parte de estas molestias. Pero <div> es todavía bastante utilizado para agrupar elementos y construir bloques que necesitamos para personalizarlo posteriormente.
En la versión anterior de HTML, la etiqueta div se definía como un elemento de estructuración genérico para una página. Normalmente se usaban los atributos de id y clase para asignar nombres que representaran semántica mente de qué parte de división se trataba. Actualmente, la especificación de W3 define la etiqueta de la siguiente manera:
The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements. W3 Specification
(Traducción) El elemento div no tiene ningún significado especial. Se puede utilizar con los atributos “id”, “class”, “lang” y “title” para marcar una semántica común a un grupo de elementos consecutivos.
Por tanto, esta etiqueta ha quedado relegada a un uso más minoritario y carece de semántica propia. Su uso actual es para estilizar con hojas de estilo contenidos de una web que carezca de etiqueta semántica. Supongamos que tengo un listado de artículos de compra en una web. El conjunto de todos los artículos probablemente sea una etiqueta de tipo <section> y cada uno de los artículos de compra sea representado por una etiqueta de tipo <article>. Pero cada artículo me gustaría que el fondo de cada artículo sea de color blanco para que el lector esté cómodo con la lectura del mismo, pero entre el blanco y el artículo me gustaría que tuviese un fondo de color lima de 5 píxeles de anchura y dos esquinas redondeadas. Probablemente para hacer este efecto dentro de la etiqueta <article> veamos la necesidad de invocar otra etiqueta auxiliar para estilizar más cómodamente. Aquí es cuando entra en escena la división
⏫ Ir a Portafolio ⏫
Ejemplos
La forma de usar esta etiqueta es, colocándola de apertura antes de donde empieza el grupo; indicando el nombre dentro de esa etiqueta, y colocar luego la etiqueta de cierre, al final del grupo . Resulta bastante sencillo; un ejemplo, para agrupar dos párrafos. El siguiente ejemplo muestra un par de párrafos (elemento p) encerrados por un elemento div. El propósito de div en este ejemplo, es el de aplicar un conjunto de estilos a ambos párrafos en una sola declaración.
Más sobre el uso de la etiqueta div
El uso de la etiqueta div es muy sencillo, como se mencionó anteriormente, se emplea para crear un bloque, que hará las veces de índice de contenidos . Visualmente la etiqueta no provoca ningún cambio; pero en la estructura interna del documento, se aplica una división muy importante. El código HTML reconoce el elemento <div>; de hecho, es uno de los elementos más usados en HTML, pero en ocasiones, muchos se exceden en su utilización .
Asimismo, es un elemento de construcción; al ser un elemento de bloque, sirve para separar secciones lógicas en una página web . Ejemplo de esto es que, si se tiene una página que explica sistemas operativos, con dos secciones: IOS y Android, y en cada sección se describen sus características; el elemento div es un contenedor genérico sin un significado semántico en particular . Se utiliza comúnmente en el desarrollo de documentos con propósitos estilísticos, en conjunto con los atributos style y class; y también puede resultar útil para proveer atributos comunes a los elementos contenidos en él .
El código HTML aplicado en dicho ejemplo, es el siguiente:
Ahora, un atributo title es aplicado a un grupo de elementos, encerrándolos con un div y estableciendo el atributo allí. En la mayoría de los navegadores verás los contenidos del atributo title al posar el puntero del mouse sobre cualquier elemento del grupo.
La etiqueta div es más fácil de usar que la etiqueta table, por eso es recomendable que la utilices cada vez que la necesites.
Una de las razones por las cuales es más fácil de usar, es porque se puede introducir nueva información con facilidad y se mostrará en esta publicación.
El código HTML que se aplicó, es el siguiente:
Asimismo, se usa la etiqueta Html <div>, cuando se quiere dar un nombre o identificador a elementos enteros, como un párrafo completo, o más habitualmente, a un grupo de elementos: párrafos, imágenes, un bloque formado por varios párrafos e imágenes, o incluso la página completa . De esta manera se puede aportarle estilos definidos en la hoja de estilos, a todos los elementos de ese grupo.
⏫ Ir a Portafolio ⏫ En un documento HTML el elemento "div" permite crear divisiones, también llamadas secciones o zonas. Las divisiones se utilizan para agrupar elementos y aplicarles estilos. Para darle color a un color DIV en HTML empleamos el atributo CSS color con al que podríamos definir un color de fondo, o al texto. Realmente es muy sencillo, y seguidamente los ejemplos: Para aplicar fondo:
Para aplicar color a la letra:
Elemento "div"
EJEMPLO En el siguiente documento ("una-division.html") el segundo y tercer párrafo están agrupados dentro de un elemento "div" donde se ha establecido que dichos párrafos deben mostrarse de color rojo:
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<title>Ejemplo de una división</title>
</head>
<body>
<p>Primer párrafo.</p>
<div style="color:red">
<p>Segundo párrafo.</p>
<p>Tercer párrafo.</p>
</div>
<p>Cuarto párrafo.</p>
</body>
</html>El resultado que se observa es el siguiente:
Primer párrafo.
Segundo párrafo.
Tercer párrafo.
Cuarto párrafo.
⏫ Ir a Portafolio ⏫
Elemento "div" y atributo class
EJEMPLO En el siguiente documento HTML ("uso-elemento-div-y-atributo-class.html") se han escrito tres divisiones haciendo uso del atributo class. Obsérvese que, en dos de dichas divisiones el valor del atributo class es "rojo" y en la otra "azul".
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<title>Ejemplo uso del elemento div y del atributo class</title>
<style>
.rojo {color:red;}
.azul {color:blue;}
</style>
</head>
<body>
<p>Primer párrafo.</p>
<div class="rojo">
<p>Segundo párrafo.</p>
<p>Tercer párrafo.</p>
</div>
<p>Cuarto párrafo.</p>
<div class="azul">
<p>Quinto párrafo.</p>
<p>Sexto párrafo.</p>
</div>
<div class="rojo">
<p>Séptimo párrafo.</p>
</div>
<p>Octavo párrafo.</p>
</body>
</html>El resultado que se observa es el siguiente:
Primer párrafo.
Segundo párrafo.
Tercer párrafo.
Cuarto párrafo.
Quinto párrafo.
Sexto párrafo.
Séptimo párrafo.
Octavo párrafo.
⏫ Ir a Portafolio ⏫
Elemento "div" y atributo id
EJEMPLO En el código del siguiente documento ("uso-elemento-div-y-atributo-id.html") se han especificado cuatro divisiones (cabecera, contenido, menu y pie) contenidas dentro de otra división llamada contendor.
⏫ Ir a Portafolio ⏫
Aplicar Alineación (align)
