1. Introducción a HTML

HTML (HyperText Markup Language, «lenguaje de marcado de hipertexto») es el lenguaje con el que se construye la estructura y el contenido de todas las páginas web. No es un lenguaje de programación, sino un lenguaje de marcado: no tiene lógica ni cálculos, solo describe qué es cada parte del documento.

Un documento HTML no es más que un archivo de texto. Tu navegador lo lee y, a partir de ese código, dibuja y maqueta la página que ves. Es importante entender el reparto de tareas:

HTML → la estructura y el contenido (títulos, párrafos, imágenes, enlaces…).
CSS → el aspecto visual (colores, tipografías, espacios, diseño).
JavaScript → el comportamiento y la interactividad.

HTML fue creado por Tim Berners-Lee en 1991 y es, desde entonces, la base de la web.

2. Características del lenguaje

Antes de escribir código conviene conocer cómo funciona HTML:

Se basa en etiquetas (también llamadas tags) que marcan cada elemento del contenido.
No distingue mayúsculas de minúsculas, aunque por convención las etiquetas se escriben en minúscula.
No es sensible a los espacios en blanco: varios espacios o saltos de línea seguidos se muestran como un solo espacio.
Es un lenguaje estándar y libre, mantenido por el W3C y el WHATWG.
La versión actual es HTML5.

Estructura mínima de un documento

Todo documento HTML parte de esta plantilla base:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi primera página</title>
</head>
<body>
    <h1>¡Hola, mundo!</h1>
</body>
</html>

Cada parte tiene su función:

<!DOCTYPE html> → indica al navegador que es un documento HTML5.
<html> → la etiqueta que contiene toda la página; con lang="es" indicamos que está en español.
<head> → información que no se ve: codificación, título de la pestaña, enlaces a estilos…
<body> → todo el contenido visible de la página.

3. Etiquetas y atributos

La etiqueta es la unidad básica de HTML. La mayoría van por parejas: una de apertura y otra de cierre, y entre ambas se coloca el contenido.

<p>Esto es un párrafo.</p>

Fíjate en que la etiqueta de cierre lleva una barra (/). Algunas etiquetas no tienen contenido y se escriben solas; se llaman etiquetas vacías, como la de salto de línea o la de imagen:

<br>
<img src="foto.jpg">

Los atributos

Los atributos añaden información o configuración a una etiqueta. Se escriben en la etiqueta de apertura, con la forma nombre="valor":

<a href="https://formacionyweb.com">Visita la web</a>

Aquí href es el atributo y "https://formacionyweb.com" su valor: le dice al enlace a dónde debe llevar. Una etiqueta puede tener varios atributos separados por espacios:

<img src="logo.png" alt="Logotipo" width="200">

4. Encabezados

Los encabezados son los títulos y subtítulos del documento. Hay seis niveles, de <h1> (el más importante) a <h6> (el menos importante):

<h1>Título principal</h1>
<h2>Subtítulo</h2>
<h3>Apartado</h3>
<h4>Subapartado</h4>
<h5>Nivel 5</h5>
<h6>Nivel 6</h6>

Resultado en el navegador

Título principal

Subtítulo

Apartado

Subapartado

Nivel 5

Nivel 6

Buenas prácticas

Usa un solo <h1> por página: es el título principal.
No te saltes niveles por estética (de h2 a h4); respeta la jerarquía.
El tamaño lo controla el CSS, no la etiqueta: elige el encabezado por su importancia, no por lo grande que se vea.

5. Párrafos y texto

El texto de una página se organiza en párrafos con la etiqueta <p>. Recuerda que HTML ignora los saltos de línea que escribas en el código: para separar párrafos hay que usar etiquetas, no pulsar Intro.

<p>Este es el primer párrafo.</p>
<p>Y este es el segundo, independiente del anterior.</p>

Dar formato al texto

Dentro de un párrafo puedes resaltar palabras con estas etiquetas:

<strong> → texto importante (se ve en negrita).
<em> → texto enfatizado (se ve en cursiva).
<mark> → texto resaltado.
<small> → texto más pequeño.
<br> → un salto de línea dentro del párrafo.
<hr> → una línea separadora horizontal.

Resultado en el navegador

Esto es muy importante y esto está enfatizado. Puedes resaltar lo clave.

Texto legal en tamaño reducido.

Nota importante

Aunque <strong> y <b> se ven igual (negrita), y <em> e <i> también (cursiva), no son lo mismo: <strong> y <em> aportan significado (importancia, énfasis), mientras que <b> e <i> son solo visuales. Usa siempre los primeros salvo que solo busques el efecto visual.

6. Listas

Las listas sirven para agrupar elementos relacionados. Hay tres tipos.

Lista desordenada

Con <ul> (viñetas). Cada elemento va en un <li>:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Lista ordenada

Con <ol> (numerada). El navegador pone los números automáticamente:

<ol>
  <li>Abre el editor</li>
  <li>Escribe el código</li>
  <li>Guarda y abre en el navegador</li>
</ol>

Resultado en el navegador

HTML
CSS
JavaScript

Abre el editor
Escribe el código
Guarda y abre en el navegador

Las listas se pueden anidar (una dentro de otra) metiendo un <ul> o <ol> dentro de un <li>.

7. Enlaces

Los enlaces son la esencia de la web (la «hipertextualidad»). Se crean con la etiqueta <a> y su atributo href, que indica el destino:

<a href="https://formacionyweb.com">Ir a la web</a>

Tipos de enlace

Externo: a otra web. href="https://..."
Interno: a otra página de tu sitio. href="contacto.html"
Ancla: a una sección de la misma página. href="#seccion" (lleva al elemento con ese id).
Correo: href="mailto:hola@ejemplo.com"
Teléfono: href="tel:+34600000000"

Abrir en una pestaña nueva

Con target="_blank" el enlace se abre en otra pestaña. Añade siempre rel="noopener" por seguridad:

<a href="https://mdn.dev" target="_blank" rel="noopener">Abrir en pestaña nueva</a>

Resultado en el navegador

Ir a la web

8. Imágenes

Las imágenes se insertan con <img>, una etiqueta vacía (no lleva cierre). Sus atributos principales son:

src → la ruta del archivo de imagen (obligatorio).
alt → un texto alternativo que describe la imagen (muy importante).
width y height → dimensiones opcionales.

<img src="logo.png" alt="Logotipo de la empresa" width="200">

¿Por qué es tan importante el `alt`?

Lo leen los lectores de pantalla para personas con discapacidad visual.
Se muestra si la imagen no carga.
Ayuda al posicionamiento en buscadores (SEO).

Imagen con pie de foto

Para acompañar una imagen con una leyenda se usan <figure> y <figcaption>:

<figure>
  <img src="grafico.png" alt="Ventas de 2026">
  <figcaption>Evolución de ventas en 2026</figcaption>
</figure>

9. Tablas

Las tablas muestran datos en filas y columnas. Sus etiquetas básicas son:

<table> → la tabla completa.
<tr> → una fila (table row).
<th> → una celda de encabezado (se ve en negrita).
<td> → una celda de datos.

<table>
  <tr>
    <th>Lenguaje</th>
    <th>Uso</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>Estructura</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>Diseño</td>
  </tr>
</table>

Resultado en el navegador

Lenguaje	Uso
HTML	Estructura
CSS	Diseño

Por defecto las tablas no tienen bordes: el aspecto (bordes, colores, espaciado) se da con CSS. Para uniones de celdas existen los atributos colspan (unir columnas) y rowspan (unir filas).

10. HTML semántico

HTML semántico significa usar etiquetas con significado para cada parte de la página, en lugar de rellenarlo todo con <div> genéricos. Cada etiqueta describe qué es su contenido:

<header> → cabecera (logo, título…).
<nav> → menú de navegación.
<main> → el contenido principal (uno por página).
<section> → una sección temática.
<article> → un contenido independiente (una noticia, una entrada de blog…).
<aside> → contenido lateral o secundario.
<footer> → pie de página.

<body>
  <header>...</header>
  <nav>...</nav>
  <main>
    <section>...</section>
    <article>...</article>
  </main>
  <footer>...</footer>
</body>

¿Por qué usarlo?

Accesibilidad: los lectores de pantalla navegan mejor la página.
SEO: los buscadores entienden mejor tu contenido.
Claridad: tu código es más fácil de leer y mantener.

Regla práctica: usa <div> solo cuando ninguna etiqueta semántica encaje.

11. Elementos de bloque y en línea

Cada etiqueta HTML se comporta de una de estas dos formas:

De bloque: ocupa todo el ancho disponible y empieza en una línea nueva. Ejemplos: <p>, <div>, <h1>, <ul>, <section>.
En línea: ocupa solo lo que necesita y se coloca dentro de una línea, junto a otros. Ejemplos: <span>, <a>, <strong>, <em>, <img>.

Resultado en el navegador

Bloque 1 (ocupa toda la fila)

Bloque 2 (baja a una línea nueva)

en línea 1 en línea 2 en línea 3 (van seguidos en la misma línea)

Entender esta diferencia es clave para maquetar: los elementos de bloque construyen la estructura y los elementos en línea marcan trozos de texto dentro de ellos.

Curso de HTML

1. Introducción a HTML

2. Características del lenguaje

Estructura mínima de un documento

3. Etiquetas y atributos

Los atributos

4. Encabezados

Título principal

Subtítulo

Apartado

Subapartado

Nivel 5

Nivel 6

Buenas prácticas

5. Párrafos y texto

Dar formato al texto

Nota importante

6. Listas

Lista desordenada

Lista ordenada

7. Enlaces

Tipos de enlace

Abrir en una pestaña nueva

8. Imágenes

¿Por qué es tan importante el alt?

Imagen con pie de foto

9. Tablas

10. HTML semántico

¿Por qué usarlo?

11. Elementos de bloque y en línea

¿Por qué es tan importante el `alt`?