Las etiquetas HTML esenciales son las que vas a usar en prácticamente cualquier página web. HTML tiene más de cien, pero con un grupo pequeño ya puedes construir una web completa.
Aquí tienes las 20 etiquetas de HTML más importantes en una tabla, con para qué sirve cada una. Debajo, el código de ejemplo de cada grupo, las etiquetas semánticas de HTML5 y una plantilla completa que las usa todas.
Las 20 etiquetas de HTML más usadas (tabla resumen)
| # | Etiqueta | Para qué sirve |
|---|---|---|
| 1 | <html> | Es la raíz del documento: envuelve todo el contenido de la página. |
| 2 | <head> | Guarda la información que no se ve: título, metadatos y enlaces a CSS. |
| 3 | <title> | Título de la pestaña del navegador y del resultado en Google. |
| 4 | <meta> | Metadatos: codificación de caracteres, adaptación a móvil o descripción. |
| 5 | <body> | Contiene todo lo que se ve en la página. |
| 6 | <h1> a <h6> | Títulos y subtítulos, del más importante (h1) al menos importante (h6). |
| 7 | <p> | Párrafo de texto. |
| 8 | <br> | Salto de línea dentro de un texto. No lleva cierre. |
| 9 | <a> | Enlace a otra página, a un archivo o a una sección de la misma página. |
| 10 | <img> | Inserta una imagen. Siempre con el atributo alt. |
| 11 | <ul> | Lista sin orden, con viñetas. |
| 12 | <ol> | Lista ordenada, con números. |
| 13 | <li> | Cada elemento de una lista, sea ul u ol. |
| 14 | <strong> | Marca un texto como importante. Se ve en negrita. |
| 15 | <em> | Marca un énfasis. Se ve en cursiva. |
| 16 | <div> | Contenedor de bloque sin significado, para agrupar y maquetar. |
| 17 | <span> | Contenedor en línea, para dar estilo a un trozo de texto. |
| 18 | <table> | Tabla de datos, junto con tr (fila), th (cabecera) y td (celda). |
| 19 | <form> | Formulario que envía datos, con label, input y textarea. |
| 20 | <button> | Botón que envía un formulario o ejecuta una acción. |
Si además quieres las etiquetas semánticas de HTML5 (header, nav, main, article, section, aside y footer), las tienes en su propia sección más abajo.
Qué es una etiqueta HTML
Una etiqueta es una palabra entre los signos < y > que le dice al navegador qué es cada parte del contenido. Casi todas van en pareja: una de apertura y otra de cierre con barra, y el contenido queda en medio.
<a href="https://recursoswebyseo.com">Visita el blog</a>En este ejemplo, <a> abre el enlace y </a> lo cierra. href es un atributo: información extra que va dentro de la etiqueta de apertura. Al conjunto de apertura, contenido y cierre se le llama elemento.
Estructura del documento
Toda página HTML parte de este esqueleto. Cópialo tal cual cada vez que empieces un archivo nuevo.
<!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>
<!-- contenido visible -->
</body>
</html><!DOCTYPE html>: no es una etiqueta, es una declaración. Le dice al navegador que use HTML5 y va siempre en la primera línea.<html lang="es">: raíz del documento. El atributo lang indica el idioma, útil para lectores de pantalla y traductores.<head>: metadatos que no se muestran: título, codificación, enlaces a CSS y scripts.<meta charset="UTF-8">: codificación de caracteres. Sin ella, las tildes y la ñ pueden verse mal.<meta name="viewport">: hace que la página se adapte al ancho del móvil.<title>: título de la pestaña y del resultado en buscadores.<body>: todo el contenido visible.
Contenido: texto e imágenes
<h1>Título principal</h1>
<h2>Subtítulo</h2>
<p>Un párrafo con <strong>texto importante</strong> y <em>un énfasis</em>.</p>
<p>Calle Mayor, 1<br>28001 Madrid</p>
<img src="foto.jpg" alt="Descripción de la foto" width="800" height="600"><h1>a<h6>: jerarquía de títulos. Usa un solo h1 por página y no te saltes niveles: después de un h2 va un h3, no un h4.<p>: párrafo de texto.<br>: salto de línea dentro del mismo párrafo, por ejemplo en una dirección. Para separar párrafos, usa otro<p>.<strong>y<em>: importancia y énfasis. El navegador los muestra en negrita y cursiva, y los lectores de pantalla pueden leerlos con otra entonación.<img>: imagen. El atributo alt describe la imagen para quien no puede verla. Con width y height evitas que la página dé saltos al cargar.
Listas, enlaces y tablas
<ul>
<li>Elemento sin orden</li>
<li>Otro elemento</li>
</ul>
<ol>
<li>Primer paso</li>
<li>Segundo paso</li>
</ol>
<a href="https://ejemplo.com" target="_blank">Enlace externo</a>
<table>
<thead>
<tr><th>Producto</th><th>Precio</th></tr>
</thead>
<tbody>
<tr><td>Camiseta</td><td>15 €</td></tr>
</tbody>
</table><ul>y<ol>: lista con viñetas o numerada.<li>: cada elemento de la lista.<a href="…">: enlace. Con target=»_blank» se abre en una pestaña nueva.<table>,<tr>,<th>,<td>: tabla, fila, celda de cabecera y celda de datos.<thead>y<tbody>separan la cabecera del cuerpo.
Usa las tablas solo para datos. Para colocar elementos en columnas, la herramienta es CSS: tienes ejemplos en la guía de CSS con Flexbox y Grid.
Contenedores: div y span
<div class="tarjeta">
<h3>Plan básico</h3>
<p>Precio: <span class="precio">9 €</span> al mes</p>
</div><div> agrupa bloques de contenido y <span> marca un trozo de texto dentro de una línea. Ninguno de los dos tiene significado propio: sirven para aplicar estilos con CSS mediante una clase. Si existe una etiqueta con significado para ese contenido, como <nav> o <article>, úsala antes que un div.
¿Prefieres aprender con un curso guiado? En Udemy tienes cursos de HTML y CSS desde cero en español, con ejercicios y proyectos. Revisa las valoraciones y el temario antes de elegir.
Etiquetas de formularios
<form action="/enviar" method="post">
<label for="nombre">Nombre</label>
<input type="text" id="nombre" name="nombre" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="mensaje">Mensaje</label>
<textarea id="mensaje" name="mensaje"></textarea>
<button type="submit">Enviar</button>
</form><form>: contenedor del formulario. action indica a dónde se envían los datos y method cómo (post o get).<label>: texto del campo. Su atributo for debe coincidir con el id del input.<input>: campo de una línea. Con type eliges texto, email, contraseña, casilla, número o fecha.<textarea>: campo de varias líneas.<button>: botón. Con type=»submit» envía el formulario.
Etiquetas semánticas HTML5
Las etiquetas semánticas describen qué papel tiene cada zona de la página. Sustituyen a los antiguos div con clases como «header» o «menu». Además, ayudan a los lectores de pantalla y a los buscadores a entender la estructura.
| Etiqueta | Para qué sirve |
|---|---|
<header> | Cabecera de la página o de un artículo: logo, título, menú. |
<nav> | Bloque de navegación principal: el menú. |
<main> | Contenido principal. Solo uno visible por página. |
<article> | Contenido que tiene sentido por sí solo: un post, una noticia, una ficha de producto. |
<section> | Sección temática dentro de una página o artículo, normalmente con su propio título. |
<aside> | Contenido relacionado pero secundario: una barra lateral o una caja de notas. |
<footer> | Pie de la página o de un artículo: contacto, enlaces legales, autor. |
<body>
<header>
<nav>Menú</nav>
</header>
<main>
<article>
<h1>Título del post</h1>
<section>
<h2>Primera parte</h2>
<p>…</p>
</section>
</article>
<aside>Posts relacionados</aside>
</main>
<footer>© 2026 Mi web</footer>
</body>La duda más habitual es article o section. Pregúntate si ese bloque tendría sentido copiado en otra web: si la respuesta es sí, es un article; si solo tiene sentido dentro de esta página, es una section. Si quieres ir más allá, tienes la guía de diseño web accesible.
Plantilla completa con las 20 etiquetas
Esta página de ejemplo usa las 20 etiquetas de la tabla y las semánticas. Guárdala como index.html, ábrela en el navegador y ve cambiando cosas para ver qué hace cada una.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi primera web</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<h1 id="inicio">Hola, soy Ana</h1>
<p>Diseño webs <strong>rápidas</strong> y <em>fáciles de usar</em>.</p>
<img src="ana.jpg" alt="Retrato de Ana sonriendo" width="400" height="400">
<div class="servicios">
<h2>Qué hago</h2>
<ol>
<li>Diseño</li>
<li>Maquetación</li>
</ol>
<p>Desde <span class="precio">300 €</span><br>por proyecto.</p>
</div>
<table>
<tr><th>Servicio</th><th>Plazo</th></tr>
<tr><td>Landing page</td><td>1 semana</td></tr>
</table>
<form id="contacto" action="/enviar" method="post">
<label for="email">Tu email</label>
<input type="email" id="email" name="email" required>
<button type="submit">Enviar</button>
</form>
</main>
<footer>
<p>© 2026 Ana</p>
</footer>
</body>
</html>Para escribirla, cualquier editor de código te sirve. Tienes una comparativa en los mejores editores HTML. Y los pasos para publicarla en la guía de cómo crear una página web en HTML.
¿Y ahora, cómo le doy estilo?
El HTML pone la estructura y el CSS el diseño. En mi pack CSS gratis tienes 6 estilos de botón y 36 estilos más, con un catálogo para copiar cada uno en un clic. Apúntate y te lo envío al correo.
Errores comunes al usar etiquetas HTML
- Usar
<br>para separar párrafos. Cada párrafo va en su propio<p>y el espacio se controla con CSS. - Elegir el título por su tamaño. Los h1-h6 marcan jerarquía, no tamaño de letra: el tamaño se cambia con CSS.
- Hacerlo todo con
<div>. Funciona, pero pierdes la información que dan header, nav, main o footer. - Imágenes sin alt. Si la imagen es decorativa, pon
alt=""vacío; si aporta información, descríbela. - Maquetar con tablas. Es una técnica de hace veinte años. Para columnas y rejillas, usa CSS Grid o Flexbox.
Preguntas frecuentes
¿Cuántas etiquetas tiene HTML?
El estándar actual define más de cien elementos, aunque algunos están obsoletos o son muy específicos. Con las 20 de la tabla y las 7 semánticas puedes construir la gran mayoría de páginas.
¿Qué diferencia hay entre etiqueta y elemento?
La etiqueta es la marca: <p> o </p>. El elemento es el conjunto completo: la etiqueta de apertura, el contenido y la de cierre.
¿Qué diferencia hay entre <b> y <strong>?
Los dos se ven en negrita, pero no significan lo mismo. <strong> indica que el texto es importante. <b> solo llama la atención sobre un texto, como una palabra clave en un resumen, sin darle más importancia. Para texto importante, usa <strong>; para un simple estilo visual, CSS con font-weight.
¿Qué etiquetas no llevan cierre?
Las llamadas etiquetas vacías, porque no tienen contenido dentro: <br>, <img>, <input>, <meta>, <link> y <hr>, entre otras.
¿Es obligatorio el atributo alt en las imágenes?
El estándar HTML lo pide en casi todos los casos y es clave para la accesibilidad. También ayuda a Google a entender qué muestra la imagen, sobre todo en Google Imágenes. Si la imagen es puramente decorativa, déjalo vacío: alt="".
¿<!DOCTYPE html> es una etiqueta?
No. Es una declaración que indica al navegador que el documento usa HTML5. Va en la primera línea y no tiene cierre.
Conclusión
Con estas 20 etiquetas y las 7 semánticas tienes la base para entender y escribir cualquier página web. Empieza por la plantilla completa, cambia textos y etiquetas, y mira en el navegador qué pasa.
Si quieres consultar cualquier otra etiqueta, la referencia más completa en español es la de elementos HTML en MDN. Y si te ha servido, compártelo con quien esté aprendiendo.
