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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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!
[pvc_stats postid="" increase="1" show_views_today="1"]
Recomendado para ti:
Etiquetas de tablas en HTML con ejemplos
Etiquetas de guión en HTML con ejemplos
Domina el diseño web con las técnicas más efectivas de CSS
Etiquetas de texto en HTML con ejemplos
Descubre los secretos para dominar el lenguaje de marcado en la web
