HTML
Elemento div
Buscar..
Introducción
El elemento div en HTML es un elemento contenedor que encapsula otros elementos y se puede utilizar para agrupar y separar partes de una página web. Un div en sí mismo no representa nada inherentemente, pero es una herramienta poderosa en el diseño web. Este tema cubre el propósito y las aplicaciones del elemento div.
Sintaxis
<div>example div</div>
Anidamiento
Es una práctica común colocar varios <div> dentro de otro <div> . Esto generalmente se conoce como elementos "anidados" y permite dividir los elementos en subsecciones o ayudar a los desarrolladores con el estilo CSS.
<div class="outer-div"> se usa para agrupar dos elementos <div class="inner-div"> ; cada uno contiene un elemento <p> .
<div class="outer-div">
<div class="inner-div">
<p>This is a paragraph</p>
</div>
<div class="inner-div">
<p>This is another paragraph</p>
</div>
</div>
Esto producirá el siguiente resultado (estilos CSS aplicados para mayor claridad):
Anidado de elementos en línea y de bloque Al anidar elementos, debe tener en cuenta que hay elementos en línea y de bloque. mientras que los elementos de bloque "agregan un salto de línea en el fondo", lo que significa que otros elementos anidados se muestran en la siguiente línea automáticamente, los elementos en línea se pueden colocar uno al lado del otro de forma predeterminada
Evitar la anidación profunda <div>
Un diseño de contenedor anidado profundo y de uso frecuente muestra un estilo de codificación incorrecto.
Las esquinas redondeadas o algunas funciones similares a menudo crean un código HTML de este tipo. Para la mayoría de los navegadores de última generación hay contrapartes de CSS3. Trate de usar lo menos posible los elementos HTML para aumentar el contenido a la relación de etiqueta y reducir la carga de la página, lo que resulta en una mejor clasificación en los motores de búsqueda.
div elemento div section no debe estar anidado a más de 6 capas.
Uso básico
El elemento <div> generalmente no tiene un significado semántico específico por sí mismo, simplemente representa una división, y se usa normalmente para agrupar y encapsular otros elementos dentro de un documento HTML y separar aquellos de otros grupos de contenido. Como tal, cada <div> se describe mejor por su contenido.
<div>
<p>Hello! This is a paragraph.</p>
</div>
El elemento div suele ser un elemento de nivel de bloque , lo que significa que separa un bloque de un documento HTML y ocupa el ancho máximo de la página. Los navegadores suelen tener la siguiente regla de CSS predeterminada:
div {
display: block;
}
El World Wide Web Consortium (W3C) lo recomienda encarecidamente a ver el elemento div como un elemento de último recurso, ya que cuando ningún otro elemento es adecuado. El uso de elementos más apropiados en lugar del elemento div conduce a una mejor accesibilidad para los lectores y una facilidad de mantenimiento más fácil para los autores.
Por ejemplo, una publicación de blog se marcaría con <article> , un capítulo con <section> , las ayudas de navegación de una página con <nav> y un grupo de controles de formulario con <fieldset> .
Los elementos div pueden ser útiles para propósitos estilísticos o para encerrar varios párrafos dentro de una sección que deben ser anotados de manera similar.
