Etiqueta HTML <div>

  • Página anterior <dir>
  • Página siguiente <dl>

Definición y uso

<div> Las etiquetas definen la división o parte (sección o división, división/section) de un documento HTML.

<div> Las etiquetas pueden dividir los documentos en partes independientes y diferentes. Puede ser utilizado como una herramienta de organización estricta y no está asociado con ningún formato.

Se puede colocar cualquier tipo de contenido <div> ¡dentro de la etiqueta!<div> se puede usar como contenedor de elementos HTML, luego se pueden definir estilos con CSS o realizar operaciones con JavaScript.

si la etiqueta id o class para marcar <div>de class o id propiedad, lo que permite definir fácilmente <div> estilos en la etiqueta.

Nota:Por defecto, el navegador siempre aplica estilos en <div> colocar un salto de línea antes y después del elemento.

Uso

<div> es un elemento de bloque. Esto significa que su contenido comienza automáticamente una nueva línea. En realidad, el salto de línea es <div> formato único inherente. Puede hacerlo a través de <div> de class o id estilos adicionales a cada

No es necesario aplicar <div> , aunque también hay ciertos beneficios en hacerlo.

Se puede agregar tanto una clase como un id al mismo <div> Aplicación de elementos class o id Atributo, pero en la mayoría de los casos se aplica solo uno de ellos. La principal diferencia entre ambos es que class se utiliza para grupos de elementos (elementos similares o, por entenderse, elementos de un tipo), mientras que id se utiliza para identificar elementos únicos.

Véase también:

Tutorial de HTML:Elementos de bloque y de línea en HTML

Tutorial de HTML:Diseño de HTML

Manual de referencia de HTML DOM:Objeto Div

Ejemplo

Parte del documento que utiliza CSS para definir estilos en el elemento <div>:

<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;
  text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
  <h2>Este es el título dentro de un elemento div</h2>
  <p>Este es el texto dentro de un elemento div.</p>
</div>
</body>
</html>

Prueba personalmente

Análisis de caso

<body>
 <h1>Nuevo sitio</h1>
  <p>Algunos textos. Algunos textos. Algunos textos...</p>
  ...
 <div class="news">
  <h2>Titular de noticias 1</h2>
  <p>Algunos textos. Algunos textos. Algunos textos...</p>
  ...
</div>
 <div class="news">
  <h2>Titular de noticias 2</h2>
  <p>Algunos textos. Algunos textos. Algunos textos...</p>
  ...
 </div>
 ...
</body>

Ejemplo de explicación

Como puede ver, el fragmento de HTML superior simula la estructura de un sitio web de noticias. Cada div combina el título y el resumen de cada noticia, lo que significa que el div agrega una estructura adicional al documento. Además, ya que estos div son elementos del mismo tipo, se puede identificar a estos div con class="news", lo que no solo les agrega un significado adecuado, sino que también facilita el uso de estilos para formatearlos, lo que es un doble beneficio.

Consejo:Para aprender más sobre el uso de class y id, consulte el capítulo 'Estructuración de etiquetas' de W3school, sección 'Div, id y otros asistentes'.

Atributos globales

<div> La etiqueta también admite Atributos globales en HTML.

Atributos de eventos

<div> La etiqueta también admite Atributos de eventos en HTML.

Configuración CSS predeterminada

La mayoría de los navegadores mostrarán los valores siguientes por defecto <div> Elemento:

div {
  display: block;
}

Prueba personalmente

Compatibilidad con navegadores

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte
  • Página anterior <dir>
  • Página siguiente <dl>