Referencia rápida

🏷️ Diccionario de etiquetas HTML

Esta página no es un módulo nuevo para seguir en orden: es un diccionario al que volver siempre que se te olvide cómo se escribía una etiqueta o para qué servía. Recoge las etiquetas que ya viste en los módulos 1 a 8, más algunas "hermanas" muy comunes que no llegamos a ver, explicadas todas con el mismo nivel de detalle. Guárdate esta página en marcadores: la vas a usar mucho, incluso cuando ya sepas HTML de sobra (¡todo el mundo consulta referencias, siempre!).

Cómo leer las tablas de esta página

En cada fila verás la etiqueta, una explicación en palabras muy sencillas de para qué sirve, y un ejemplo mínimo de código que puedes copiar y adaptar. Si una palabra en cursiva te resulta rara, recuerda que casi siempre es el nombre en inglés del que viene la etiqueta: entenderlo te ayuda a memorizarla.

1. El esqueleto de la página

Las piezas obligatorias que ya viste en el Módulo 1: siempre van igual, en todas tus páginas.

Etiqueta	¿Para qué sirve?	Ejemplo
`<!DOCTYPE html>`	Avisa al navegador de que esto es HTML moderno. Va siempre en la primera línea, y es la única "etiqueta" de esta lista que no lleva cierre.	`<!DOCTYPE html>`
`<html>`	Envuelve absolutamente todo el contenido de la página.	`<html lang="es">...</html>`
`<head>`	Información sobre la página que no se ve en pantalla directamente (título de pestaña, idioma, estilos...).	`<head>...</head>`
`<title>`	El texto que aparece en la pestaña del navegador.	`<title>Mi página</title>`
`<meta>`	Datos técnicos sobre la página, como el juego de caracteres (para que las tildes se vean bien). No tiene cierre.	`<meta charset="UTF-8">`
`<body>`	Todo lo que sí se ve en pantalla: textos, imágenes, botones...	`<body>...</body>`
`<link>`	Conecta tu página con un archivo externo, normalmente de estilos CSS. Va dentro de `<head>` y no tiene cierre.	`<link rel="stylesheet" href="estilos.css">`

2. Secciones de la página (div y sus "hermanas con nombre")

<div> agrupa contenido sin decir nada sobre lo que hay dentro (lo viste en el Módulo 6). Existen también otras etiquetas que agrupan contenido igual que un div, pero además le dicen al navegador qué tipo de sección es. Se llaman etiquetas semánticas ("semántica" significa, aquí, "con significado").

Piensa en las cajas de mudanza otra vez. Un <div> es una caja de cartón sin ninguna etiqueta escrita. Un <header> es esa misma caja, pero con un rotulador que pone "CABECERA" por fuera: sigue siendo una caja, pero ahora se entiende mejor qué hay dentro, tanto para ti como para un lector de pantalla o un buscador como Google.

Etiqueta	¿Para qué sirve?
`<div>`	Caja genérica, sin significado propio. Úsala cuando ninguna de las de abajo encaje.
`<span>`	Como `<div>`, pero "en línea": no salta de línea, sirve para marcar una palabra suelta dentro de un párrafo (por ejemplo, para darle un color con CSS).
`<header>`	La cabecera de la página o de una sección: normalmente el logo, el título y el menú.
`<nav>`	El menú de navegación: el grupo de enlaces principales para moverse por el sitio.
`<main>`	El contenido principal de la página. Solo debería haber uno por página.
`<section>`	Un bloque temático con entidad propia, normalmente con su propio título dentro.
`<article>`	Una pieza de contenido que tendría sentido por sí sola fuera de la página, como una noticia o una entrada de blog.
`<aside>`	Contenido relacionado pero secundario, como una barra lateral o una nota al margen.
`<footer>`	El pie de página o de una sección: datos de contacto, enlaces legales, copyright...

¿Div o etiqueta semántica?

No pasa nada si en tus dos actividades usas sobre todo <div>, como se plantea en el curso: es perfectamente válido y así lo verás en el Módulo 6. Estas etiquetas semánticas son un "siguiente paso" bueno de conocer, y muchas páginas reales las combinan con divs sin problema.

3. Texto: títulos y párrafos

Etiqueta	¿Para qué sirve?	Ejemplo
`<h1>` a `<h6>`	Encabezados, del más importante (h1) al menos importante (h6). Como el índice de un libro (Módulo 2).	`<h1>Título</h1>`
`<p>`	Un párrafo de texto normal.	`<p>Hola mundo.</p>`
`<br>`	Un salto de línea forzado dentro de un párrafo, sin empezar uno nuevo. No tiene cierre. Úsalo con moderación (por ejemplo, en una dirección postal).	`Calle Mayor 1<br>28001 Madrid`
`<hr>`	Una línea horizontal que separa visualmente dos temas distintos. No tiene cierre.	`<hr>`

4. Dar énfasis o formato a una palabra

Aquí hay una trampa habitual: existen etiquetas "gemelas" que se ven igual pero significan cosas distintas. Es importante entender la diferencia.

Etiqueta	¿Para qué sirve?	Cómo se ve
`<strong>`	Importancia real: esto es urgente o relevante (Módulo 2).	negrita
`<b>`	Negrita solo por estética, sin que sea especialmente importante (por ejemplo, resaltar la primera vez que aparece un producto).	negrita
`<em>`	Énfasis: la frase cambiaría de tono si la leyeras en voz alta (Módulo 2).	cursiva
`<i>`	Cursiva solo por estética o convención, sin énfasis: nombres de barcos, términos técnicos, pensamientos de un personaje.	cursiva
`<u>`	Subrayado que no es un enlace (úsalo poco: la gente asocia el subrayado a "esto es pulsable").	subrayado
`<small>`	Texto pequeño, típico de letra pequeña legal o de condiciones.	texto pequeño
`<mark>`	Resalta texto como si lo marcaras con un rotulador fluorescente.	resaltado
`<sub>`	Subíndice, un poco más abajo y pequeño (como en fórmulas químicas).	H₂O
`<sup>`	Superíndice, un poco más arriba y pequeño (como en notas al pie o potencias).	x²

📖 Para no confundirte

¿strong o b?: Pregúntate: si lo leyera un lector de pantalla en voz alta, ¿debería sonar más fuerte porque es importante? Si sí, strong. Si es solo estética, b.
¿em o i?: Igual: si cambia el "tono de voz" de la frase, em. Si es una convención visual (como un nombre propio en cursiva), i.
En este curso: Para las dos actividades, con <strong> y <em> tienes de sobra: son las que pide el ejercicio y las que deberías usar por defecto.

5. Listas

Etiqueta	¿Para qué sirve?	Ejemplo
`<ul>`	Lista sin orden (viñetas). El orden de los elementos no importa (Módulo 3).	`<ul><li>Pan</li></ul>`
`<ol>`	Lista ordenada (numerada). El orden sí importa (Módulo 3).	`<ol><li>Paso 1</li></ol>`
`<li>`	Cada elemento suelto, dentro de un `<ul>` o un `<ol>`.	`<li>Un elemento</li>`
`<dl> <dt> <dd>`	Lista de término + definición: una ficha técnica o un mini-diccionario (Módulo 8).	`<dl><dt>Nivel</dt><dd>Fácil</dd></dl>`

6. Imágenes y enlaces

Etiqueta	¿Para qué sirve?	Ejemplo
`<img>`	Inserta una imagen. No tiene cierre (Módulo 4).	`<img src="foto.jpg" alt="Descripción">`
`<a>`	Convierte texto o una imagen en un enlace pulsable (Módulo 4).	`<a href="pagina.html">Ir</a>`

📖 Atributos que siempre van con estas etiquetas

src: En <img>: de dónde viene la imagen (su ruta o dirección web). Obligatorio.
alt: En <img>: descripción en texto de la imagen, para lectores de pantalla y por si no carga. Obligatorio, nunca lo dejes vacío sin motivo.
width / height: En <img>: ancho y alto en píxeles. Opcionales, pero ayudan a que la página no "salte" mientras carga la imagen.
href: En <a>: a dónde lleva el enlace. Obligatorio para que el enlace funcione.
target="_blank": En <a>: abre el enlace en una pestaña nueva. Opcional, úsalo para enlaces a sitios externos.

7. Tablas

No las vimos en ningún módulo dedicado, pero las hemos usado todo el curso para mostrar referencias (¡mira si no esta misma tabla!). Sirven para organizar datos en filas y columnas, como una hoja de cálculo sencilla.

Etiqueta	¿Para qué sirve?
`<table>`	Envuelve la tabla entera.
`<tr>`	Una fila (table row).
`<th>`	Una celda de cabecera, en negrita (table header): el nombre de una columna o fila.
`<td>`	Una celda normal de datos (table data).
`<thead> / <tbody>`	Agrupan, respectivamente, la fila de cabeceras y el resto de filas de datos.

<table>
  <thead>
    <tr><th>Curso</th><th>Duración</th></tr>
  </thead>
  <tbody>
    <tr><td>Acuarela</td><td>6 horas</td></tr>
  </tbody>
</table>

8. Formularios

Etiqueta	¿Para qué sirve?	Ejemplo
`<form>`	Envuelve todos los campos de un formulario (Módulo 7).	`<form>...</form>`
`<label>`	El texto que explica qué escribir en un campo. Va conectado con `for` + `id` (Módulo 7).	`<label for="n">Nombre</label>`
`<input>`	Un campo donde escribir o marcar algo. El atributo `type` decide de qué tipo. No tiene cierre.	`<input type="text" id="n">`
`<textarea>`	Como un input, pero para textos largos de varias líneas.	`<textarea></textarea>`
`<select> / <option>`	Un menú desplegable con varias opciones para elegir.	`<select><option>Sí</option></select>`
`<button>`	Un botón pulsable, para enviar el formulario o para acciones con JavaScript.	`<button>Enviar</button>`

📖 Tipos de input más comunes

text: Texto normal, una sola línea.
email: Correo electrónico (el navegador avisa si falta la @).
password: Contraseña, oculta los caracteres con puntos.
checkbox: Casilla que se marca o desmarca (sí/no).
radio: Botón redondo para elegir una única opción de un grupo.
submit: Botón que envía el formulario.

9. Citas, abreviaturas, fechas y código

Etiqueta	¿Para qué sirve?
`<blockquote>`	Cita larga, en su propio bloque (Módulo 8).
`<q>`	Cita corta, dentro de una frase; el navegador pone las comillas solo (Módulo 8).
`<abbr>`	Abreviatura o sigla, con su significado en el atributo `title` (Módulo 8).
`<address>`	Datos de contacto del autor (Módulo 8).
`<time>`	Una fecha o una hora, también en formato "para máquinas" con `datetime` (Módulo 8).
`<code>`	Un trocito de código dentro de una frase, se muestra con letra de máquina de escribir (la usamos en toda esta página).