Aprende todo sobre las etiquetas y atributos HTML. Guía completa con ejemplos prácticos, mejores prácticas y técnicas avanzadas para dominar la estructura HTML.
Las etiquetas HTML son elementos fundamentales que definen la estructura y el contenido de una página web. Actúan como contenedores que envuelven el contenido y le dan significado semántico. Cada etiqueta tiene un propósito específico y comunica al navegador cómo debe interpretar y mostrar el contenido.
Una etiqueta HTML típica consta de varios componentes:
<etiqueta atributo="valor">Contenido</etiqueta>
Componentes principales:
<etiqueta>atributo="valor"</etiqueta><h1 class="titulo-principal" id="encabezado">Bienvenido a Mi Sitio Web</h1>
<p class="descripcion" style="color: blue;">Este es un párrafo de ejemplo.</p>
<img src="imagen.jpg" alt="Descripción de la imagen" width="300" height="200">
Estas etiquetas requieren tanto una etiqueta de apertura como de cierre:
<!-- Etiquetas de encabezado -->
<h1>Encabezado Principal</h1>
<h2>Subencabezado</h2>
<h3>Encabezado de Tercer Nivel</h3>
<!-- Etiquetas de párrafo y texto -->
<p>Este es un párrafo de texto.</p>
<span>Texto en línea</span>
<div>Contenedor de bloque</div>
<!-- Etiquetas de lista -->
<ul>
<li>Elemento de lista no ordenada</li>
<li>Otro elemento</li>
</ul>
<ol>
<li>Primer elemento ordenado</li>
<li>Segundo elemento ordenado</li>
</ol>
Estas etiquetas no requieren etiqueta de cierre:
<!-- Etiquetas de medios -->
<img src="imagen.jpg" alt="Descripción">
<audio src="audio.mp3" controls>
<video src="video.mp4" controls width="400" height="300">
<!-- Etiquetas de formulario -->
<input type="text" name="nombre" placeholder="Ingresa tu nombre">
<input type="email" name="email" required>
<input type="submit" value="Enviar">
<!-- Otras etiquetas vacías -->
<br> <!-- Salto de línea -->
<hr> <!-- Línea horizontal -->
<meta charset="UTF-8">
<link rel="stylesheet" href="estilos.css">
HTML5 introdujo etiquetas semánticas que proporcionan significado al contenido:
<header>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#servicios">Servicios</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h1>Título del Artículo</h1>
<time datetime="2025-09-03">3 de septiembre, 2025</time>
</header>
<section>
<h2>Introducción</h2>
<p>Contenido del artículo...</p>
</section>
</article>
<aside>
<h3>Artículos Relacionados</h3>
<ul>
<li><a href="#">Artículo 1</a></li>
<li><a href="#">Artículo 2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2025 Mi Sitio Web. Todos los derechos reservados.</p>
</footer>
Los atributos HTML proporcionan información adicional sobre las etiquetas. Modifican el comportamiento o la apariencia de los elementos y siempre se especifican en la etiqueta de apertura.
<etiqueta atributo1="valor1" atributo2="valor2">Contenido</etiqueta>
Reglas importantes:
Estos atributos pueden usarse con cualquier etiqueta HTML:
<!-- id: Identificador único -->
<div id="contenedor-principal">Contenido único</div>
<!-- class: Clases CSS para estilizado -->
<p class="texto-destacado texto-grande">Párrafo con múltiples clases</p>
<!-- style: Estilos CSS en línea -->
<span style="color: red; font-weight: bold;">Texto rojo y negrita</span>
<!-- title: Información adicional (tooltip) -->
<abbr title="HyperText Markup Language">HTML</abbr>
<!-- lang: Idioma del contenido -->
<p lang="es">Este párrafo está en español</p>
<p lang="en">This paragraph is in English</p>
<!-- data-*: Atributos de datos personalizados -->
<div data-usuario-id="12345" data-rol="administrador">Usuario</div>
<!-- hidden: Ocultar elemento -->
<div hidden>Este contenido está oculto</div>
<!-- tabindex: Orden de navegación con teclado -->
<button tabindex="1">Primer botón</button>
<button tabindex="2">Segundo botón</button>
<a>)<!-- href: Destino del enlace -->
<a href="https://www.ejemplo.com">Enlace externo</a>
<a href="#seccion1">Enlace interno</a>
<a href="mailto:contacto@ejemplo.com">Enviar email</a>
<a href="tel:+1234567890">Llamar teléfono</a>
<!-- target: Cómo abrir el enlace -->
<a href="https://www.ejemplo.com" target="_blank">Abrir en nueva pestaña</a>
<a href="documento.pdf" target="_self">Abrir en la misma pestaña</a>
<!-- rel: Relación con el destino -->
<a href="https://www.ejemplo.com" rel="noopener noreferrer">Enlace seguro</a>
<a href="https://www.ejemplo.com" rel="sponsored">Enlace patrocinado</a>
<!-- download: Descargar archivo -->
<a href="documento.pdf" download="mi-documento.pdf">Descargar PDF</a>
<img>)<!-- src: Fuente de la imagen (obligatorio) -->
<img src="imagen.jpg" alt="Descripción de la imagen">
<!-- alt: Texto alternativo (obligatorio para accesibilidad) -->
<img src="logo.png" alt="Logo de la empresa">
<!-- width y height: Dimensiones -->
<img src="foto.jpg" alt="Foto" width="400" height="300">
<!-- loading: Carga diferida -->
<img src="imagen-grande.jpg" alt="Imagen" loading="lazy">
<!-- srcset: Imágenes responsivas -->
<img src="imagen-pequena.jpg"
srcset="imagen-pequena.jpg 400w, imagen-mediana.jpg 800w, imagen-grande.jpg 1200w"
sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
alt="Imagen responsiva">
<!-- Campos de entrada -->
<input type="text" name="nombre" placeholder="Tu nombre" required maxlength="50">
<input type="email" name="email" placeholder="tu@email.com" required>
<input type="password" name="password" minlength="8" required>
<input type="number" name="edad" min="18" max="100" step="1">
<input type="date" name="fecha" min="2025-01-01" max="2025-12-31">
<!-- Área de texto -->
<textarea name="mensaje" rows="5" cols="40" placeholder="Tu mensaje aquí" required></textarea>
<!-- Selección -->
<select name="pais" required>
<option value="">Selecciona un país</option>
<option value="es">España</option>
<option value="mx">México</option>
<option value="ar">Argentina</option>
</select>
<!-- Casillas de verificación -->
<input type="checkbox" id="terminos" name="terminos" required>
<label for="terminos">Acepto los términos y condiciones</label>
<!-- Botones de radio -->
<input type="radio" id="masculino" name="genero" value="masculino">
<label for="masculino">Masculino</label>
<input type="radio" id="femenino" name="genero" value="femenino">
<label for="femenino">Femenino</label>
<table border="1" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th colspan="2">Información Personal</th>
<th rowspan="2">Acciones</th>
</tr>
<tr>
<th>Nombre</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan Pérez</td>
<td>juan@email.com</td>
<td rowspan="2">
<button>Editar</button>
<button>Eliminar</button>
</td>
</tr>
<tr>
<td>María García</td>
<td>maria@email.com</td>
</tr>
</tbody>
</table>
Algunos atributos son booleanos (verdadero/falso) y su presencia indica "verdadero":
<!-- Atributos booleanos comunes -->
<input type="text" required disabled readonly>
<input type="checkbox" checked>
<select multiple>
<option>Opción 1</option>
<option selected>Opción 2</option>
<option>Opción 3</option>
</select>
<video controls autoplay muted loop>
<source src="video.mp4" type="video/mp4">
</video>
<details open>
<summary>Haz clic para expandir</summary>
<p>Contenido oculto que se muestra al expandir.</p>
</details>
Usa etiquetas que reflejen el significado del contenido:
<!-- ✅ Correcto: Uso semántico -->
<h1>Título Principal de la Página</h1>
<h2>Subtítulo de Sección</h2>
<p>Párrafo de texto normal.</p>
<strong>Texto importante</strong>
<em>Texto enfatizado</em>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#servicios">Servicios</a></li>
</ul>
</nav>
<!-- ❌ Incorrecto: Uso no semántico -->
<div class="titulo-grande">Título Principal de la Página</div>
<div class="titulo-mediano">Subtítulo de Sección</div>
<div>Párrafo de texto normal.</div>
<div class="negrita">Texto importante</div>
<div class="cursiva">Texto enfatizado</div>
Siempre considera la accesibilidad en tus etiquetas y atributos:
<!-- Imágenes con texto alternativo -->
<img src="grafico-ventas.png" alt="Gráfico que muestra un aumento del 25% en ventas durante el último trimestre">
<!-- Formularios accesibles -->
<label for="nombre-usuario">Nombre de usuario:</label>
<input type="text" id="nombre-usuario" name="username" required aria-describedby="ayuda-nombre">
<div id="ayuda-nombre">Debe tener entre 3 y 20 caracteres</div>
<!-- Enlaces descriptivos -->
<a href="informe-anual.pdf" aria-label="Descargar informe anual 2025 en formato PDF">
Descargar informe anual
</a>
<!-- Botones con etiquetas claras -->
<button type="submit" aria-label="Enviar formulario de contacto">Enviar</button>
Mantén un HTML válido y bien estructurado:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título de la Página</title>
</head>
<body>
<header>
<h1>Encabezado Principal</h1>
<nav>
<!-- Navegación -->
</nav>
</header>
<main>
<article>
<!-- Contenido principal -->
</article>
</main>
<footer>
<!-- Pie de página -->
</footer>
</body>
</html>
Usa atributos data-* para almacenar información personalizada:
<div class="producto"
data-producto-id="12345"
data-precio="29.99"
data-categoria="electronica"
data-disponible="true">
<h3>Smartphone XYZ</h3>
<p>Precio: $29.99</p>
<button onclick="agregarAlCarrito(this.parentElement.dataset.productoId)">
Agregar al Carrito
</button>
</div>
<script>
// Acceder a los datos desde JavaScript
const producto = document.querySelector('.producto');
console.log(producto.dataset.productoId); // "12345"
console.log(producto.dataset.precio); // "29.99"
console.log(producto.dataset.categoria); // "electronica"
</script>
<form>
<!-- Campo de búsqueda -->
<input type="search" name="busqueda" placeholder="Buscar productos...">
<!-- Selector de color -->
<input type="color" name="color-favorito" value="#ff0000">
<!-- Rango deslizante -->
<input type="range" name="volumen" min="0" max="100" value="50">
<!-- Campo de fecha y hora -->
<input type="datetime-local" name="cita">
<!-- Campo de archivo con restricciones -->
<input type="file" name="imagen" accept="image/*" multiple>
<!-- Lista de datos -->
<input type="text" list="navegadores" name="navegador">
<datalist id="navegadores">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>
</form>
<!-- Video con múltiples fuentes -->
<video controls width="640" height="360" poster="miniatura.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<track src="subtitulos-es.vtt" kind="subtitles" srclang="es" label="Español">
<track src="subtitulos-en.vtt" kind="subtitles" srclang="en" label="English">
Tu navegador no soporta el elemento video.
</video>
<!-- Audio con controles -->
<audio controls preload="metadata">
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Tu navegador no soporta el elemento audio.
</audio>
<!-- Detalles expandibles -->
<details>
<summary>Preguntas Frecuentes</summary>
<div>
<h4>¿Cómo puedo contactar al soporte?</h4>
<p>Puedes contactarnos a través del formulario de contacto o por email.</p>
</div>
</details>
<!-- Medidor de progreso -->
<progress value="70" max="100">70%</progress>
<!-- Medidor de valor -->
<meter value="6" min="0" max="10">6 de 10</meter>
<!-- Elemento de diálogo -->
<dialog id="mi-dialogo">
<h2>Confirmar Acción</h2>
<p>¿Estás seguro de que quieres continuar?</p>
<button onclick="document.getElementById('mi-dialogo').close()">Cancelar</button>
<button onclick="confirmarAccion()">Confirmar</button>
</dialog>
<!-- ❌ Incorrecto -->
<div>
<p>Párrafo sin cerrar
<span>Texto en span
</div>
<!-- ✅ Correcto -->
<div>
<p>Párrafo correctamente cerrado</p>
<span>Texto en span correctamente cerrado</span>
</div>
<!-- ❌ Incorrecto -->
<img src=imagen.jpg alt=Mi imagen>
<div class=contenedor principal>
<!-- ✅ Correcto -->
<img src="imagen.jpg" alt="Mi imagen">
<div class="contenedor principal">
<!-- ❌ Incorrecto -->
<div id="contenedor">Primer div</div>
<div id="contenedor">Segundo div</div>
<!-- ✅ Correcto -->
<div id="contenedor-1">Primer div</div>
<div id="contenedor-2">Segundo div</div>
<!-- ❌ Incorrecto -->
<p>Este es un párrafo <div>con un div anidado</div></p>
<a href="#">Enlace <a href="#">con otro enlace</a></a>
<!-- ✅ Correcto -->
<p>Este es un párrafo <span>con un span anidado</span></p>
<p><a href="#">Primer enlace</a> y <a href="#">segundo enlace</a></p>
Usa el validador oficial del W3C para verificar tu HTML:
<!-- Ejemplo de HTML válido -->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página Válida</title>
</head>
<body>
<h1>Título Principal</h1>
<p>Contenido de la página.</p>
</body>
</html>
Usa las herramientas de desarrollo para inspeccionar y depurar:
<!-- Ejemplo con atributos de depuración -->
<div class="componente" data-debug="true">
<h2>Componente de Prueba</h2>
<p>Contenido para depurar</p>
</div>
Dominar las etiquetas y atributos HTML es fundamental para crear páginas web efectivas y accesibles. Las etiquetas proporcionan estructura y significado semántico, mientras que los atributos añaden funcionalidad y comportamiento específico.
Puntos clave para recordar:
alt en imágenes y for en labelsCon esta comprensión sólida de las etiquetas y atributos HTML, estarás bien equipado para crear páginas web robustas, accesibles y semánticamente correctas. Continúa practicando y experimentando con diferentes combinaciones para dominar completamente este lenguaje fundamental de la web.
La próxima vez que escribas HTML, recuerda que cada etiqueta y atributo tiene un propósito específico. Úsalos sabiamente para crear experiencias web excepcionales que sean tanto funcionales como accesibles para todos los usuarios.
Continúa leyendo con estos artículos relacionados
Aprende HTML desde cero con esta guía completa que explica qué es HTML, estructura de documentos, etiquetas esenciales y cómo crear tu primera página web.
Aprende la estructura completa de un documento HTML desde DOCTYPE hasta el cierre. Guía detallada con ejemplos prácticos, mejores prácticas y técnicas avanzadas.
Aprende a usar encabezados y párrafos HTML correctamente. Guía completa con ejemplos prácticos, jerarquía semántica, accesibilidad y mejores prácticas SEO.
Domina los enlaces y anclas HTML. Aprende a crear navegación web efectiva con ejemplos prácticos, atributos avanzados, accesibilidad y mejores prácticas SEO.