Definición destacada
¿Como funciona el comando en HTML5: 'div'?
Última modificación: 2024-06-17
Instrucción del Elemento <div> en HTML5
El elemento <div> en HTML5 es uno de los elementos más comunes y versátiles que se utilizan en el diseño de páginas web. La etiqueta <div> (abreviatura de "division") se utiliza para agrupar y organizar contenido, facilitando el control de estilos con CSS y la navegación con JavaScript.
Atributos Comunes del Elemento <div>
El elemento <div> puede tener varios atributos estándar, así como atributos globales que son comunes a casi todos los elementos HTML. A continuación, detallamos los atributos más relevantes:
-
Globales:
id: Define un identificador único para el elemento (<div id="uniqueId">). Es útil para aplicarle estilos específicos con CSS o manipularlo con JavaScript.class: Asigna una o varias clases al elemento (<div class="firstClass secondClass">). Permite aplicar estilos comunes a múltiples elementos.style: Aplica estilos en línea al elemento (<div style="color: red;">). Generalmente se recomienda utilizar archivos CSS externos, perostylepuede ser útil en ocasiones específicas.title: Proporciona información adicional sobre el elemento (<div title="This is a tooltip">). Al colocar el cursor sobre el elemento, se mostrará esta información.lang: Especifica el idioma del contenido del elemento (<div lang="en">).data-*: Atributo personalizado que permite almacenar información privada asociada al elemento (<div data-user="admin">). Puede ser leído y manipulado con JavaScript.
-
Eventos:
onclick: Ejecuta un script cuando el elemento es clicado (<div onclick="myFunction()">).onmouseover: Ejecuta un script cuando el cursor se mueve sobre el elemento (<div onmouseover="hoverFunction()">).onmouseout: Ejecuta un script cuando el cursor deja el elemento (<div onmouseout="leaveFunction()">).onkeydown: Ejecuta un script cuando se presiona una tecla sobre el elemento (<div onkeydown="keyFunction()">).
Atributos menos comunes pero también válidos
hidden: Hace que el elemento no sea visible (<div hidden>).tabindex: Define el orden de tabulación del elemento (<div tabindex="1">).
Uso del Elemento <div> en HTML5
El <div> se usa principalmente para agrupar bloques de contenido y aplicar estilos o scripts. A continuación, se presentan algunos ejemplos sencillos de uso:
Ejemplo 1: Agrupar Contenido para Estilización
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Div</title>
<style>
.container {
width: 100%;
border: 1px solid black;
padding: 10px;
}
.section {
margin: 10px;
}
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="section">
<p>Este es el primer párrafo.</p>
</div>
<div class="section highlight">
<p>Este es el segundo párrafo, resaltado.</p>
</div>
</div>
</body>
</html>Ejemplo 2: Manipulación con JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Manipulación con JavaScript</title>
<script>
function changeContent() {
document.getElementById("myDiv").innerHTML = "El contenido ha sido cambiado!";
}
</script>
</head>
<body>
<div id="myDiv">Texto original</div>
<button onclick="changeContent()">Cambiar Contenido</button>
</body>
</html>En resumen, el elemento <div> es un contenedor genérico que permite organizar y manipular contenido de forma efectiva usando atributos y eventos. Su versatilidad hace que sea una herramienta fundamental en el desarrollo web moderno.