Listado de etiquetas HTML5 esenciales con ejemplos
🏗️ Estructura básica
Define la base de todo documento HTML.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi primera página</title>
</head>
<body>
<!-- Comentario HTML -->
</body>
</html><!DOCTYPE html>: indica que se usa HTML5.
<html>: raíz del documento.
<head>: contiene metadatos y configuraciones.
<meta>: define información como la codificación o la vista adaptable.
<title>: título que aparece en la pestaña del navegador.
<body>: contiene todo el contenido visible de la página.
<!– Cualquier texto –>: comentario que solo ve el desarrollador en el código.
📝 Texto y formato
Organizan y dan estilo al texto del documento.
<h1>Título principal</h1>
<h2>Subtítulo</h2>
<p>Esto es un párrafo.</p>
<strong>Texto importante</strong>
<em>Texto con énfasis</em>
<span style="color:red;">Texto en línea</span>
<br> Salto de línea
<a href="https://ejemplo.com">Enlace</a><h1>–<h6>: jerarquía de títulos, siendo <h1> el más importante y <h6> el menos.
<p>: define un párrafo.
<strong>: indica importancia (texto en negrita).
<em>: resalta con énfasis (texto en cursiva).
<span>: contenedor en línea para aplicar estilos.
<br>: inserta un salto de línea.
<a>: crea un enlace a otra página o recurso (atributo href).
🎬 Multimedia
Insertan imágenes, videos, audios o gráficos SVG.
<img src="foto.jpg" alt="Descripción de la imagen">
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="blue" stroke-width="3" fill="lightblue" />
</svg>
<video controls width="320">
<source src="video.mp4" type="video/mp4">
</video>
<audio controls>
<source src="audio.mp3" type="audio/mp3">
</audio><img>: inserta una imagen (el atributo alt describe su contenido para accesibilidad).
<svg>: permite crear gráficos vectoriales escalables.
<video>: muestra un video con controles.
<audio>: reproduce sonido o música.
<source>: define los archivos multimedia dentro de <video> o <audio>.
🧩 Formularios
Permiten recoger información del usuario mediante campos interactivos.
<form action="/enviar" method="post">
<label>Nombre:</label>
<input type="text" name="nombre">
<label>Edad:</label>
<input type="number" name="edad">
<label>Género:</label>
<input type="radio" name="genero" value="hombre"> Hombre
<input type="radio" name="genero" value="mujer"> Mujer
<label>Aficiones:</label>
<input type="checkbox" name="deporte"> Deporte
<input type="checkbox" name="musica"> Música
<label>Comentarios:</label>
<textarea name="comentarios" rows="3" cols="30"></textarea>
<label>País:</label>
<select name="pais">
<option>España</option>
<option>México</option>
</select>
<input type="submit" value="Enviar">
</form><form>: agrupa los campos del formulario.
<label>: etiqueta descriptiva de un campo.
<input type=»text»>: campo de texto corto.
<input type=»number»>: campo numérico.
<input type=»radio»>: opción única dentro de un grupo.
<input type=»checkbox»>: selección múltiple.
<textarea>: área para texto largo o comentarios.
<select> / <option>: lista desplegable.
<input type=»submit»>: botón para enviar el formulario.
🧱 Semántica SEO
Organizan el contenido de forma estructurada y comprensible para buscadores.
<header>Encabezado del sitio</header>
<nav>Menú de navegación</nav>
<main>Contenido principal</main>
<section>Sección temática</section>
<article>Artículo o post</article>
<aside>Información lateral</aside>
<footer>Pie de página</footer><header>: cabecera del sitio o sección.
<nav>: contiene enlaces de navegación.
<main>: contenido principal de la página.
<section>: agrupa contenidos relacionados.
<article>: bloque independiente de contenido (como un post).
<aside>: información lateral o complementaria.
<footer>: pie de página.
🌈 Otras etiquetas útiles
<ul>
<li>Elemento A</li>
<li>Elemento B</li>
</ul>
<ol type="A">
<li>Primer ítem</li>
<li>Segundo ítem</li>
</ol>
<table>
<tr><th>Nombre</th><th>Edad</th></tr>
<tr><td>Ana</td><td>30</td></tr>
</table>
<figure>
<img src="imagen.jpg" alt="Descripción">
<figcaption>Pie de imagen</figcaption>
</figure><ul>: lista sin orden (viñetas).
<ol>: lista ordenada (type="A", "a", "I", "1").
<li>: elemento dentro de una lista.
<table>: crea tablas de datos.
<tr>: fila de la tabla.
<th>: celda de encabezado.
<td>: celda normal de datos.
<figure> y <figcaption>: imagen con pie descriptivo.
