HTML
Tutorial HTML: División (div)
HTML div: uso y ejemplos. Aprende a usar el elemento div en HTML para estructurar tu contenido con ejemplos prácticos.
Aprende HTML GRATIS y certifícateLa etiqueta <div>
en HTML es uno de los elementos más fundamentales en la construcción de sitios web. Su nombre es una abreviatura de "division", que se puede traducir como "división". Se utiliza principalmente como contenedor para agrupar bloques de código y aplicar estilos CSS a través de selectores de clase o id.
Definición y uso
El elemento <div>
es un contenedor en bloque que agrupa otros elementos y contenido. No tiene un significado semántico en sí mismo, y se utiliza para agrupar, estilizar y manipular otros elementos dentro de él.
Un elemento <div>
en HTML se inicia con la etiqueta de apertura <div>
y se cierra con la etiqueta de cierre </div>
.
A continuación, se presenta un ejemplo de cómo se vería en el código:
<div>
<p>Este es un párrafo dentro de una div.</p>
</div>
Atributos
El elemento <div>
puede llevar varios atributos como class
, id
, style
entre otros. Estos atributos permiten manipular el comportamiento y la apariencia de la <div>
en particular.
Por ejemplo:
<div id="miDiv" class="claseDiv" style="color: red;">
<p>Este es un párrafo dentro de una div con id, clase y estilo.</p>
</div>
En este ejemplo, id="miDiv"
identifica de manera única a esta <div>
, lo que permite referenciarla directamente en JavaScript o CSS. class="claseDiv"
asigna una clase a la <div>
, que puede ser reutilizada en otros elementos y permite aplicar estilos CSS en grupo. style="color: red;"
aplica un estilo CSS directamente a la <div>
, en este caso, cambiar el color del texto a rojo.
Relación con CSS
El elemento <div>
es comúnmente usado junto con hojas de estilo en cascada (CSS). CSS es el lenguaje de hojas de estilo utilizado para describir la presentación de un documento escrito en HTML.
Por ejemplo, si queremos que todas las divs con la clase claseDiv
tengan un color de fondo azul, lo haríamos de la siguiente manera en CSS:
.claseDiv {
background-color: blue;
}
Y en el HTML:
<div class="claseDiv">
<p>Este párrafo está en una div con fondo azul.</p>
</div>
Consideraciones
Es importante recordar que aunque la <div>
es una herramienta útil para la organización y manipulación de elementos en un sitio web, no debe ser utilizada en exceso ni reemplazar elementos semánticos cuando estos son apropiados. Elementos como <header>
, <footer>
, <section>
, <article>
, etc., tienen significado semántico y ayudan a los motores de búsqueda y a las tecnologías de asistencia a entender la estructura de la página. Utilizar demasiadas <div>
s puede hacer que la página sea más difícil de entender y mantener.
Ejercicios de esta lección División (div)
Evalúa tus conocimientos de esta lección División (div) con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Todas las lecciones de HTML
Accede a todas las lecciones de HTML y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Html
Introducción Y Entorno
Doctype
Sintaxis Y Estructura
Elementos Y Etiquetas
Sintaxis Y Estructura
Atributos
Sintaxis Y Estructura
Anidación De Etiquetas
Sintaxis Y Estructura
Comentarios
Sintaxis Y Estructura
Encabezados (H1-h6)
Textos Y Enlaces
Enlace (A)
Textos Y Enlaces
Párrafo (P)
Textos Y Enlaces
Listas (Ul, Ol, Li)
Textos Y Enlaces
Imagen (Img)
Textos Y Enlaces
División (Div)
Estructura De Página
Etiquetas Semánticas (Article, Section, Header, Footer, Nav, Aside)
Estructura De Página
Tablas (Table, Tr, Td, Th)
Estructura De Página
Formularios (Form, Input, Select, Textarea, Button)
Estructura De Página
Imágenes Vectoriales (Svg)
Elementos Multimedia
Incrustación De Contenido (Iframe)
Elementos Multimedia
Audio (Audio)
Elementos Multimedia
Video (Video)
Elementos Multimedia
Estilo Incorporado (Style)
Metadatos Y Estilización Incorporada
Metadatos (Meta, Title, Link)
Metadatos Y Estilización Incorporada
Atributos De Aria
Metadatos Y Estilización Incorporada
Navegación Por Teclado
Metadatos Y Estilización Incorporada
Contraste Y Legibilidad
Características Avanzadas Y Optimización
Validación De Html
Características Avanzadas Y Optimización
Compatibilidad Con Navegadores
Características Avanzadas Y Optimización
Optimización De La Carga De La Página (Lazy Loading)
Características Avanzadas Y Optimización
Certificados de superación de HTML
Supera todos los ejercicios de programación del curso de HTML y obtén certificados de superación para mejorar tu currículum y tu empleabilidad.
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender el propósito de la etiqueta
<div>
en HTML como un contenedor en bloque sin significado semántico propio. - Aprender a utilizar atributos como
class
,id
ystyle
para aplicar estilos y manipular el comportamiento de las<div>
de forma específica. - Conocer la relación de la etiqueta
<div>
con hojas de estilo en cascada (CSS) para aplicar estilos a grupos de elementos. - Entender la importancia de utilizar elementos semánticos apropiados (como
<header>
,<footer>
,<section>
,<article>
, etc.) en lugar de abusar de las<div>
para mejorar la accesibilidad y la comprensión de la estructura de la página.