Curso de HTML

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
  1. Abre el editor
  2. Escribe el código
  3. 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
LenguajeUso
HTMLEstructura
CSSDiseñ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.

12. Ejercicios

Practica lo aprendido. Crea un archivo .html para cada ejercicio, ábrelo en el navegador y comprueba el resultado. Intenta resolverlos por tu cuenta antes de abrir la solución.

Ejercicio 1. Tu primera página Básico

Crea un documento HTML5 con la estructura mínima. Debe cumplir:

  • Idioma en español y codificación UTF-8.
  • Título de la pestaña: Mi primera página.
  • En el cuerpo, un encabezado principal que diga ¡Hola, mundo!.
Ver solución 
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi primera página</title>
</head>
<body>
    <h1>¡Hola, mundo!</h1>
</body>
</html>

Ejercicio 2. Jerarquía de encabezados Básico

Crea una página sobre tu ciudad que tenga:

  • Un <h1> con el nombre de la ciudad (recuerda: solo uno por página).
  • Dos <h2>: Historia y Lugares de interés.
  • Dentro del segundo, dos <h3> con dos lugares concretos.
Ver solución 
<h1>Salamanca</h1>

<h2>Historia</h2>
<p>Fundada en la época prerromana...</p>

<h2>Lugares de interés</h2>
<h3>La Plaza Mayor</h3>
<p>Considerada una de las más bonitas de España.</p>

<h3>La Universidad</h3>
<p>Una de las más antiguas de Europa.</p>

Ejercicio 3. Dar formato al texto Básico

Escribe un párrafo presentándote en el que uses:

  • Tu nombre marcado como importante.
  • Tu profesión con énfasis.
  • Tu lenguaje favorito resaltado.

Después añade una línea separadora y un segundo párrafo con texto pequeño, como si fuera un aviso legal.

Ver solución 
<p>Me llamo <strong>Ana García</strong> y soy
   <em>desarrolladora web</em>. Mi lenguaje favorito
   es <mark>JavaScript</mark>.</p>

<hr>

<p><small>Todos los derechos reservados 2026.</small></p>

Ejercicio 4. Listas Básico

En una misma página crea:

  • Una lista desordenada con tres lenguajes que quieras aprender.
  • Una lista ordenada con los tres pasos para crear una web.
  • Dentro del primer paso de la ordenada, anida una lista desordenada con dos herramientas.
Ver solución 
<h2>Quiero aprender</h2>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<h2>Pasos para crear una web</h2>
<ol>
  <li>Preparar las herramientas
    <ul>
      <li>Un editor de código</li>
      <li>Un navegador</li>
    </ul>
  </li>
  <li>Escribir el HTML</li>
  <li>Dar estilo con CSS</li>
</ol>

Ejercicio 5. Enlaces Medio

Crea una página con cuatro enlaces distintos:

  • Uno externo a formacionyweb.com que se abra en una pestaña nueva y de forma segura.
  • Uno interno a contacto.html.
  • Uno de correo electrónico.
  • Un ancla que lleve a una sección con id="final" situada al final de la página.
Ver solución 
<a href="https://formacionyweb.com" target="_blank" rel="noopener">
  Formación y Web
</a>

<a href="contacto.html">Contacto</a>

<a href="mailto:hola@ejemplo.com">Escríbeme</a>

<a href="#final">Ir al final</a>

<!-- ... mucho contenido ... -->

<h2 id="final">Final de la página</h2>

Ejercicio 6. Imágenes Medio

Practica con imágenes:

  • Inserta una imagen con un texto alternativo descriptivo y 300 píxeles de ancho.
  • Debajo, crea una figura con pie de foto.
Ver solución 
<img src="paisaje.jpg" alt="Montañas nevadas al amanecer" width="300">

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

Ejercicio 7. Tablas Medio

Crea una tabla con tu horario de tres asignaturas. Debe tener tres columnas (Asignatura, Día y Hora) y la primera fila debe usar celdas de encabezado.

Ver solución 
<table>
  <tr>
    <th>Asignatura</th>
    <th>Día</th>
    <th>Hora</th>
  </tr>
  <tr>
    <td>Diseño web</td>
    <td>Lunes</td>
    <td>09:00</td>
  </tr>
  <tr>
    <td>Bases de datos</td>
    <td>Martes</td>
    <td>11:00</td>
  </tr>
  <tr>
    <td>Programación</td>
    <td>Jueves</td>
    <td>16:00</td>
  </tr>
</table>

Ejercicio 8. HTML semántico Medio

Maqueta la estructura de un blog usando solo etiquetas semánticas (sin ningún <div>). Necesitas: una cabecera con el título, un menú con tres enlaces, el contenido principal con dos artículos, una barra lateral y un pie de página.

Ver solución 
<body>
  <header>
    <h1>Mi blog</h1>
  </header>

  <nav>
    <a href="index.html">Inicio</a>
    <a href="blog.html">Blog</a>
    <a href="contacto.html">Contacto</a>
  </nav>

  <main>
    <article>
      <h2>Primera entrada</h2>
      <p>Contenido de la primera entrada.</p>
    </article>

    <article>
      <h2>Segunda entrada</h2>
      <p>Contenido de la segunda entrada.</p>
    </article>
  </main>

  <aside>
    <h2>Sobre mí</h2>
    <p>Aprendiendo desarrollo web.</p>
  </aside>

  <footer>
    <p>2026 - Mi blog</p>
  </footer>
</body>

Ejercicio 9. Proyecto final: tu página personal Avanzado

Reúne todo lo aprendido en una sola página de presentación. Debe incluir:

  • Estructura semántica completa (cabecera, navegación, contenido y pie).
  • Una jerarquía correcta de encabezados.
  • Un párrafo de presentación con texto en negrita y cursiva.
  • Una lista con tus aficiones o conocimientos.
  • Una imagen con pie de foto.
  • Una tabla con tu formación o experiencia.
  • Al menos un enlace externo que abra en pestaña nueva.
Ver solución 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ana García - Desarrolladora web</title>
</head>
<body>
  <header>
    <h1>Ana García</h1>
  </header>

  <nav>
    <a href="#sobre-mi">Sobre mí</a>
    <a href="#formacion">Formación</a>
  </nav>

  <main>
    <section id="sobre-mi">
      <h2>Sobre mí</h2>
      <p>Soy <strong>desarrolladora web</strong> y me
         apasiona el <em>diseño de interfaces</em>.</p>

      <figure>
        <img src="foto.jpg" alt="Retrato de Ana García" width="250">
        <figcaption>En mi puesto de trabajo</figcaption>
      </figure>

      <h3>Conocimientos</h3>
      <ul>
        <li>HTML y CSS</li>
        <li>JavaScript</li>
        <li>Diseño responsive</li>
      </ul>
    </section>

    <section id="formacion">
      <h2>Formación</h2>
      <table>
        <tr>
          <th>Curso</th>
          <th>Centro</th>
          <th>Año</th>
        </tr>
        <tr>
          <td>Desarrollo web</td>
          <td>Formación y Web</td>
          <td>2026</td>
        </tr>
      </table>
    </section>
  </main>

  <footer>
    <p>Aprende más en
      <a href="https://formacionyweb.com" target="_blank" rel="noopener">
        Formación y Web
      </a>
    </p>
  </footer>
</body>
</html>

Referencia externa: W3Schools - HTML