Horario de atención: De Lunes a Sábado de 10:00 a.m. a 6:00 p.m. ✨🚀
Las etiquetas de agrupación en HTML se utilizan para organizar y estructurar contenido en bloques o conjuntos lógicos. Estas etiquetas son fundamentales para crear una página web ordenada y semánticamente significativa. A continuación, te explico las etiquetas más comunes de agrupación y cómo utilizarlas, acompañadas de ejemplos.
(div): División o contenedor genérico
La etiqueta <div> es un contenedor genérico que se utiliza para agrupar otros elementos. Es útil para aplicar estilos o scripts a un conjunto de elementos.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Div</title>
<style>
.contenedor {
border: 1px solid #000;
padding: 20px;
margin: 10px;
}
</style>
</head>
<body data-rsssl=1>
<div class="contenedor">
<h2>Título dentro del div</h2>
<p>Este es un párrafo agrupado dentro de un div.</p>
</div>
</body>
</html>
(span): Contenedor en línea
La etiqueta <span> se utiliza para agrupar texto o elementos en línea, generalmente para aplicar estilos o scripts.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Span</title>
<style>
.resaltado {
color: red;
font-weight: bold;
}
</style>
</head>
<body data-rsssl=1>
<p>Este es un texto con una palabra <span class="resaltado">resaltada</span>.</p>
</body>
</html>
(section): Sección de contenido
La etiqueta <section> se utiliza para agrupar contenido relacionado dentro de una sección específica de la página. Es ideal para dividir el contenido en bloques temáticos.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Section</title>
</head>
<body data-rsssl=1>
<section>
<h2>Sección 1</h2>
<p>Contenido relacionado con la primera sección.</p>
</section>
<section>
<h2>Sección 2</h2>
<p>Contenido relacionado con la segunda sección.</p>
</section>
</body>
</html>
(article): Contenido independiente
La etiqueta <article> se utiliza para agrupar contenido que tiene sentido por sí mismo, como artículos, publicaciones o noticias.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Article</title>
</head>
<body data-rsssl=1>
<article>
<h2>Título del artículo</h2>
<p>Este es un artículo independiente.</p>
</article>
</body>
</html>
(nav): Navegación
La etiqueta <nav> agrupa enlaces de navegación, como menús o barras de navegación.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Nav</title>
</head>
<body data-rsssl=1>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#sobre-nosotros">Sobre Nosotros</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</body>
</html>
(header): Encabezado
La etiqueta <header> se utiliza para agrupar el contenido introductorio o de navegación de una sección o página, como logotipos, títulos y menús.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Header</title>
</head>
<body data-rsssl=1>
<header>
<h1>Mi Sitio Web</h1>
<p>Bienvenido a mi página</p>
</header>
</body>
</html>
(footer): Pie de página
La etiqueta <footer> se utiliza para agrupar información de pie de página, como créditos, enlaces legales o información de contacto.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Footer</title>
</head>
<body data-rsssl=1>
<footer>
<p>© 2024 Mi Sitio Web. Todos los derechos reservados.</p>
</footer>
</body>
</html>
(aside): Contenido relacionado o complementario
La etiqueta <aside> se utiliza para agrupar contenido adicional o relacionado con el contenido principal, como barras laterales o bloques de información.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Aside</title>
</head>
<body data-rsssl=1>
<main>
<h2>Contenido principal</h2>
<p>Este es el contenido principal de la página.</p>
</main>
<aside>
<h3>Información adicional</h3>
<p>Este es un bloque con contenido relacionado.</p>
</aside>
</body>
</html>
(main): Contenido principal
La etiqueta <main> se utiliza para agrupar el contenido principal de la página. Solo debe haber un <main> por página.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Main</title>
</head>
<body data-rsssl=1>
<main>
<h1>Contenido Principal</h1>
<p>Este es el contenido más importante de la página.</p>
</main>
</body>
</html>
(fieldset) y (legend): Agrupación en formularios
La etiqueta <fieldset> se utiliza para agrupar elementos dentro de un formulario, y <legend> para darle un título al grupo.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Fieldset</title>
</head>
<body data-rsssl=1>
<form>
<fieldset>
<legend>Información personal</legend>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</fieldset>
</form>
</body>
</html>
Las etiquetas de agrupación en HTML son esenciales para estructurar el contenido de manera lógica, semántica y visualmente comprensible. Usarlas adecuadamente no solo mejora la organización del código, sino que también facilita la experiencia del usuario y la accesibilidad en los sitios web. ¡Domina estas etiquetas para crear páginas bien diseñadas y funcionales!
