Módulo 02: Fundamentos de HTML

Objetivos del módulo

Comprender la estructura completa de un documento HTML5 y el papel de cada parte
Distinguir entre etiquetas, elementos y atributos
Diferenciar elementos de bloque y elementos en línea
Estructurar textos con encabezados y párrafos de forma jerárquica
Usar con propiedad las etiquetas de formato de texto según su significado
Crear listas desordenadas, ordenadas, de descripción y anidadas
Dominar los enlaces: rutas absolutas y relativas, anclas, target, rel, mailto, tel y download
Escribir comentarios y entidades de caracteres
Conocer los atributos globales (id, class, title, lang, data-*…)
Saber cuándo usar los contenedores genéricos div y span

1. La estructura de un documento HTML

📘 Concepto: HTML (HyperText Markup Language, lenguaje de marcado de hipertexto) es el lenguaje que describe la estructura y el significado del contenido de una página web. “Marcado” significa que marcas el texto con etiquetas para decir qué es cada cosa: esto es un título, esto un párrafo, esto un enlace.

Todo documento HTML5 tiene este esqueleto:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Recetas de la abuela | Cocina tradicional</title>
  </head>
  <body>
    <h1>Recetas de la abuela</h1>
    <p>Las mejores recetas de cocina tradicional española.</p>
  </body>
</html>

Vamos a analizar cada línea.

`<!DOCTYPE html>`

<!DOCTYPE html>

Es la declaración de tipo de documento. No es una etiqueta HTML, sino una instrucción para el navegador: “interpreta este documento con las reglas del HTML moderno” (el llamado modo estándar).

⚠️ Importante: Si omites el doctype, el navegador entra en modo quirks (modo de compatibilidad con webs de los años 90) y aplicará reglas antiguas y extrañas al CSS. Ponlo siempre en la primera línea. No distingue mayúsculas: <!doctype html> también es válido.

`<html lang="es">`

El elemento raíz: envuelve todo el documento. El atributo lang indica el idioma principal del contenido.

Valor de `lang`	Idioma
`es`	Español
`es-ES`	Español de España
`en`	Inglés
`ca`	Catalán
`eu`	Euskera
`gl`	Gallego

¿Por qué es importante lang?

Los lectores de pantalla eligen la voz y la pronunciación correctas. Sin lang="es", un lector configurado en inglés leería tu texto en español con acento inglés, y resultaría incomprensible.
Los buscadores saben a qué público mostrar la página.
Los navegadores ofrecen traducción automática y aplican reglas tipográficas del idioma (por ejemplo, la división de palabras con guiones).

`<head>`: la información sobre la página

El head contiene metadatos: información sobre el documento que no se muestra en la página.

Elemento	Para qué sirve
`<meta charset="UTF-8">`	Codificación de caracteres
`<meta name="viewport" ...>`	Comportamiento en móviles
`<title>`	Título de la pestaña, de los marcadores y de los resultados de búsqueda
`<meta name="description" ...>`	Resumen de la página para los buscadores
`<link rel="stylesheet" ...>`	Enlazar hojas de estilo CSS
`<link rel="icon" ...>`	Icono de la pestaña (favicon)

`<meta charset="UTF-8">`

Indica la codificación de caracteres. UTF-8 es capaz de representar cualquier carácter de cualquier idioma: tildes, eñes, alfabeto chino, emojis…

⚠️ Importante: El meta charset debe aparecer lo antes posible dentro del head (en los primeros 1024 bytes del documento). Si falta, o si el fichero no se guardó como UTF-8, verás caracteres corruptos como Ã± en lugar de ñ.

`<meta name="viewport">`

<meta name="viewport" content="width=device-width, initial-scale=1">

Sin esta línea, los móviles muestran la página como si fuera un ordenador de unos 980 píxeles de ancho y la encogen, de modo que todo se ve diminuto.

Parte	Significado
`width=device-width`	El ancho de la página es igual al ancho de la pantalla del dispositivo
`initial-scale=1`	El nivel de zoom inicial es 100 %

⚠️ Importante: No añadas maximum-scale=1 ni user-scalable=no. Impiden que el usuario haga zoom, lo que perjudica gravemente la accesibilidad (las personas con baja visión necesitan ampliar).

`<title>`

El título es uno de los elementos más importantes del documento:

Aparece en la pestaña del navegador.
Es el texto por defecto al guardar la página en marcadores.
Es el titular azul en los resultados de Google.
Es lo primero que anuncia un lector de pantalla al abrir la página.

Título malo	Título bueno
`Document`	`Contacto \\| Fontanería López, Valencia`
`Inicio`	`Fontanería López \\| Reparaciones urgentes en Valencia`
`Página 1`	`Tarta de queso al horno: receta fácil \\| Recetas de la abuela`

💡 Consejo: Un buen <title> es único para cada página, describe su contenido concreto y tiene entre 50 y 60 caracteres aproximadamente. Patrón habitual: Contenido de la página | Nombre del sitio.

`<body>`: el contenido visible

Todo lo que el usuario ve (textos, imágenes, enlaces, formularios…) va dentro del body. Solo puede haber un head y un body por documento.

2. Etiquetas, elementos y atributos

Anatomía de un elemento

            atributo       valor
               │             │
            ┌──┴──┐ ┌────────┴────────┐
<a          href  = "https://www.rae.es"  >  Diccionario de la RAE  </a>
└───────────────────┬───────────────────┘   └─────────┬─────────┘  └┬─┘
          etiqueta de apertura                     contenido      etiqueta
                                                                  de cierre

Término	Definición
Etiqueta (tag)	La marca entre `<` y `>`: `<p>`, `</p>`
Elemento	El conjunto completo: apertura + contenido + cierre
Atributo	Información adicional en la etiqueta de apertura, en forma `nombre="valor"`
Contenido	Lo que hay entre la apertura y el cierre (texto u otros elementos)

Elementos vacíos

Algunos elementos no tienen contenido ni etiqueta de cierre. Se llaman elementos vacíos (void elements):

<br>                                  <!-- Salto de línea -->
<hr>                                  <!-- Separación temática -->
<img src="gato.jpg" alt="Un gato">    <!-- Imagen -->
<input type="text" name="nombre">     <!-- Campo de formulario -->
<meta charset="UTF-8">                <!-- Metadato -->
<link rel="stylesheet" href="a.css">  <!-- Recurso enlazado -->

💡 Consejo: Verás a menudo la sintaxis <br /> o <img ... /> con barra final. Es una herencia de XHTML. En HTML5 es válida pero innecesaria; lo importante es ser coherente en todo el proyecto. En este curso la omitiremos.

Anidamiento correcto

Los elementos pueden contener otros elementos. La regla de oro: el último que se abre es el primero que se cierra, como las muñecas rusas.

<!-- ✅ Correcto -->
<p>Este texto es <strong>muy <em>importante</em></strong>.</p>

<!-- ❌ Incorrecto: las etiquetas se cruzan -->
<p>Este texto es <strong>muy <em>importante</strong></em>.</p>

Reglas de los atributos

<a href="contacto.html" title="Ir a la página de contacto" class="enlace destacado">Contacto</a>

Se escriben en la etiqueta de apertura, separados por espacios.
El valor va entre comillas dobles (recomendado) o simples.
Un elemento no puede repetir el mismo atributo.
El orden de los atributos no importa.
Los atributos booleanos no necesitan valor: su sola presencia significa “verdadero”.

<input type="checkbox" checked>   <!-- Marcado -->
<input type="text" disabled>      <!-- Desactivado -->
<video src="v.mp4" controls autoplay muted></video>

Espacios en blanco

El navegador colapsa los espacios, tabulaciones y saltos de línea consecutivos en un solo espacio: por muchos espacios, tabulaciones o saltos de línea que escribas entre dos palabras de un párrafo, en la página se verá solo un espacio. Esto te permite sangrar el código para que sea legible sin afectar al resultado.

3. Elementos de bloque y elementos en línea

Por defecto, cada elemento HTML tiene un comportamiento de visualización. Los dos tipos fundamentales son:

📘 Concepto: Un elemento de bloque ocupa todo el ancho disponible y empieza en una línea nueva, como los párrafos de un libro. Un elemento en línea ocupa solo el ancho de su contenido y se coloca dentro del flujo del texto, como una palabra subrayada dentro de una frase.

Característica	Bloque	En línea
Empieza en línea nueva	Sí	No
Ancho	Todo el disponible	El de su contenido
Puede contener	Bloques y elementos en línea	Texto y otros elementos en línea
Ejemplos	`p`, `h1`-`h6`, `div`, `ul`, `ol`, `li`, `blockquote`, `pre`, `table`, `form`, `section`, `article`	`a`, `span`, `strong`, `em`, `img`, `code`, `abbr`, `time`, `mark`, `br`

💻 Ejemplo:

<p>Primer párrafo con un <a href="#">enlace</a> y una palabra <strong>destacada</strong>.</p>
<p>Segundo párrafo: siempre empieza en una línea nueva.</p>

Resultado: dos párrafos uno debajo del otro. El enlace y la palabra en negrita quedan dentro de la línea del primer párrafo.

⚠️ Importante: Esto es el comportamiento por defecto. Con CSS puedes cambiarlo (display: block, display: inline, display: flex…). Por eso nunca elijas una etiqueta por cómo se ve, sino por lo que significa. Lo verás a fondo en el módulo 09.

4. Encabezados

HTML tiene seis niveles de encabezado, de h1 (el más importante) a h6 (el menos importante).

<h1>Guía de viaje: Asturias</h1>
  <h2>Qué ver</h2>
    <h3>Costa</h3>
      <h4>Playas de Llanes</h4>
      <h4>Cudillero</h4>
    <h3>Interior</h3>
      <h4>Picos de Europa</h4>
  <h2>Qué comer</h2>
    <h3>Fabada</h3>
    <h3>Cachopo</h3>
  <h2>Dónde dormir</h2>

📘 Concepto: Los encabezados crean el índice (el esquema) del documento, igual que los títulos y subtítulos de un libro. Los lectores de pantalla permiten saltar de encabezado en encabezado, y los buscadores los usan para entender de qué trata cada parte.

Reglas de uso

Regla	Explicación
Un único `h1` por página	Es el título principal de la página (normalmente coincide con la idea del `<title>`)
No saltes niveles	Después de un `h2` va un `h3`, no un `h4`
Elige por jerarquía, no por tamaño	Si quieres un texto grande, usa CSS; si quieres uno pequeño que sea `h2`, también CSS

⚠️ Importante: Técnicamente HTML permite varios h1, pero la recomendación práctica (por accesibilidad y SEO) es un solo h1 por página y una jerarquía sin saltos.

5. Párrafos, saltos de línea y separadores

Párrafos: `<p>`

<p>La fabada asturiana es un guiso de alubias blancas con compango.</p>
<p>Se sirve tradicionalmente como primer plato, aunque es tan contundente que suele bastar como plato único.</p>

Los navegadores añaden un margen vertical por defecto entre párrafos.

Salto de línea: `<br>`

<br> fuerza un salto de línea dentro de un mismo bloque de texto. Úsalo solo cuando el salto forma parte del contenido, como en direcciones postales o poemas:

<p>
  Volverán las oscuras golondrinas<br>
  en tu balcón sus nidos a colgar,<br>
  y otra vez con el ala a sus cristales<br>
  jugando llamarán.
</p>

⚠️ Importante: No uses <br> para separar párrafos ni para crear espacio vertical (<br><br><br>). Para párrafos distintos usa varios <p>, y para el espacio, CSS (margin).

Separador temático: `<hr>`

<hr> representa un cambio de tema entre párrafos (como los asteriscos que separan escenas en una novela). Se muestra como una línea horizontal, pero su significado es semántico.

<p>...y así terminó el primer día de viaje.</p>
<hr>
<p>A la mañana siguiente partimos hacia los Picos de Europa.</p>

6. Formato de texto con significado

HTML tiene muchas etiquetas para marcar fragmentos de texto. La clave es elegirlas por su significado, no por su aspecto.

Importancia y énfasis: `strong` y `em`

Etiqueta	Significado	Aspecto por defecto
`<strong>`	Importancia, seriedad o urgencia	Negrita
`<em>`	Énfasis que cambia el sentido de la frase (se pronunciaría distinto)	Cursiva
`<b>`	Texto que se destaca sin más importancia (palabras clave, nombres de producto)	Negrita
`<i>`	Voz o tono distinto: términos técnicos, palabras en otro idioma, pensamientos	Cursiva

<p><strong>Atención:</strong> el puente estará cerrado del 3 al 7 de noviembre.</p>

<p>Yo <em>no</em> dije que fuera fácil.</p>         <!-- Énfasis en "no" -->
<p>Yo no dije que fuera <em>fácil</em>.</p>        <!-- Énfasis en "fácil": otro sentido -->

<p>La palabra <i lang="en">software</i> no tiene traducción exacta.</p>
<p>Prueba nuestro nuevo modelo <b>Turbo 3000</b>.</p>

💡 Consejo: En la práctica, usa strong y em en el 90 % de los casos. Reserva b e i para cuando quieras diferenciar visualmente un texto sin darle importancia ni énfasis.

Otras etiquetas de texto

Etiqueta	Significado	Ejemplo
`<mark>`	Texto resaltado por su relevancia en el contexto (como un subrayador)	Términos buscados en unos resultados
`<small>`	Letra pequeña: avisos legales, copyright, aclaraciones	`<small>IVA no incluido</small>`
`<s>`	Contenido que ya no es correcto o relevante	Un precio anterior
`<del>` / `<ins>`	Texto eliminado / insertado en una revisión del documento	Control de cambios
`<u>`	Anotación no textual (por ejemplo, una falta de ortografía marcada)	Poco uso; se confunde con enlaces
`<sub>` / `<sup>`	Subíndice / superíndice	H₂O, m²
`<abbr>`	Abreviatura o sigla; el atributo `title` da la forma completa	`<abbr title="Organización Mundial de la Salud">OMS</abbr>`
`<dfn>`	Término que se define en esa frase	Primera aparición de un concepto
`<cite>`	Título de una obra (libro, película, canción)	`<cite>Don Quijote de la Mancha</cite>`
`<q>`	Cita corta en línea (el navegador añade las comillas)	`<q>Sé que no sé nada</q>`
`<time>`	Fecha u hora, con formato legible por máquinas en `datetime`	`<time datetime="2026-10-12">12 de octubre</time>`
`<code>` \| Fragmento de código \| `<code>console.log()</code>`
`<kbd>`	Tecla o entrada del usuario	`<kbd>Ctrl</kbd> + <kbd>C</kbd>`
`<samp>`	Salida de un programa	`<samp>Archivo no encontrado</samp>`
`<var>`	Variable matemática o de programación	`<var>x</var> = 5`

💻 Ejemplo: Todas en acción:

<p>Precio: <s>59,99 €</s> <strong>39,99 €</strong> <small>(IVA incluido)</small></p>
<p>Resultados para «café»: el <mark>café</mark> de Colombia es suave y afrutado.</p>
<p>La <dfn>fotosíntesis</dfn> transforma CO<sub>2</sub> y agua en glucosa.</p>
<p>La habitación mide 12 m<sup>2</sup>.</p>
<p>Según la <abbr title="Organización Mundial de la Salud">OMS</abbr>, conviene caminar 30 minutos al día.</p>
<p>Mi película favorita es <cite>El laberinto del fauno</cite>. Como dijo Sócrates, <q>solo sé que no sé nada</q>.</p>
<p>El evento será el <time datetime="2026-11-14T18:30">14 de noviembre a las 18:30</time>.</p>
<p>Pulsa <kbd>Ctrl</kbd> + <kbd>C</kbd>. Si escribes <code>ping google.es</code> verás <samp>Respuesta desde 142.250.184.163</samp>.</p>
<p>Lista de la compra: <del>leche</del> <ins>leche sin lactosa</ins></p>

El atributo `datetime` de `<time>`

<time> muestra una fecha en formato legible para personas, mientras que datetime la ofrece en un formato estándar para máquinas (buscadores, calendarios, lectores de pantalla):

Formato `datetime`	Significado
`2026-10-12`	Fecha (año-mes-día)
`2026-10`	Mes
`18:30`	Hora
`2026-10-12T18:30`	Fecha y hora
`2026-10-12T18:30+02:00`	Fecha y hora con zona horaria
`PT2H30M`	Duración: 2 horas y 30 minutos

Texto preformateado: `<pre>`

<pre> respeta los espacios y los saltos de línea tal como los escribas y usa una fuente monoespaciada. Se combina con <code> para mostrar código:

<pre><code>function saludar(nombre) {
  return "Hola, " + nombre;
}</code></pre>

⚠️ Importante: Dentro de <pre>, los espacios iniciales cuentan. Si sangras el contenido para que el HTML quede bonito, esa sangría aparecerá en la página. Por eso el código empieza justo después de <code>.

Citas largas: `<blockquote>`

Para citas de varias líneas o párrafos. El atributo cite puede indicar la URL de la fuente, y se suele acompañar de figure y figcaption para mostrar el autor:

<figure>
  <blockquote cite="https://www.cervantesvirtual.com/">
    <p>
      En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho
      tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua,
      rocín flaco y galgo corredor.
    </p>
  </blockquote>
  <figcaption>— Miguel de Cervantes, <cite>Don Quijote de la Mancha</cite></figcaption>
</figure>

Etiqueta	Uso
`<q>`	Cita corta, dentro de un párrafo
`<blockquote>`	Cita larga, como bloque independiente
`<cite>`	Título de la obra citada (no el nombre del autor)

7. Listas

Listas desordenadas: `<ul>`

Para elementos en los que el orden no importa. Cada elemento va en un <li> (list item):

<h3>Ingredientes</h3>
<ul>
  <li>500 g de alubias de la granja</li>
  <li>1 chorizo asturiano</li>
  <li>1 morcilla asturiana</li>
  <li>150 g de panceta</li>
</ul>

Resultado: cuatro líneas, cada una precedida de un punto (viñeta).

Listas ordenadas: `<ol>`

Para elementos en los que el orden sí importa (pasos, clasificaciones):

<h3>Preparación</h3>
<ol>
  <li>Pon las alubias en remojo la noche anterior.</li>
  <li>Cuécelas a fuego lento con el compango.</li>
  <li>Asusta el guiso con agua fría tres veces.</li>
  <li>Deja reposar antes de servir.</li>
</ol>

Resultado: las cuatro líneas numeradas del 1 al 4.

Atributos de <ol>:

Atributo	Efecto	Ejemplo
`type`	Tipo de numeración: `1`, `a`, `A`, `i`, `I`	`<ol type="A">` → A, B, C
`start`	Número inicial	`<ol start="5">` → 5, 6, 7
`reversed`	Cuenta hacia atrás	`<ol reversed>` → 3, 2, 1
`value` (en `li`)	Fija el número de un elemento concreto	`<li value="10">`

💡 Consejo: El aspecto de las viñetas y los números (círculos, cuadrados, emojis, colores) se controla con CSS (list-style-type, ::marker). En HTML usa type solo cuando el tipo de numeración forma parte del significado (por ejemplo, apartados legales a, b, c).

Listas de descripción: `<dl>`

Para pares término-descripción: glosarios, preguntas frecuentes, fichas técnicas.

Etiqueta	Significado
`<dl>`	Description list: la lista completa
`<dt>`	Description term: el término
`<dd>`	Description details: la descripción

<h3>Ficha técnica</h3>
<dl>
  <dt>Procesador</dt>
  <dd>8 núcleos a 3,2 GHz</dd>

  <dt>Memoria</dt>
  <dd>16 GB DDR5</dd>

  <dt>Conectividad</dt>
  <dd>Wi-Fi 7</dd>
  <dd>Bluetooth 5.4</dd>
</dl>

Un término puede tener varias descripciones y viceversa.

Listas anidadas

Una lista puede contener otras listas. La sublista va dentro de un <li>, nunca directamente dentro de <ul> u <ol>:

<ul>
  <li>Frutas
    <ul>
      <li>Manzanas</li>
      <li>Naranjas</li>
    </ul>
  </li>
  <li>Verduras
    <ol>
      <li>Lechuga</li>
      <li>Tomate</li>
    </ol>
  </li>
</ul>

⚠️ Importante: Los únicos hijos directos permitidos en <ul> y <ol> son <li> (y elementos de script como <template> o <script>). En <dl> solo <dt>, <dd> o un <div> que los agrupe.

8. Enlaces

El hipervínculo es la esencia de la web. Se crea con el elemento <a> (anchor, ancla) y el atributo href (hypertext reference):

<a href="https://www.rae.es">Diccionario de la Real Academia Española</a>

Rutas absolutas

Una URL absoluta incluye el esquema y el dominio completos. Se usa para enlazar a otros sitios web:

<a href="https://developer.mozilla.org/es/docs/Web/HTML">Documentación de HTML en MDN</a>

Rutas relativas

Una ruta relativa se calcula desde la ubicación del fichero actual. Se usa para enlazar páginas de tu propio sitio.

Partimos de esta estructura:

mi-web/
├── index.html
├── contacto.html
├── blog/
│   ├── index.html
│   └── articulo-1.html
└── img/
    └── logo.png

Desde	Hacia	Ruta relativa	Explicación
`index.html`	`contacto.html`	`contacto.html`	Mismo directorio
`index.html`	`blog/articulo-1.html`	`blog/articulo-1.html`	Entrar en una subcarpeta
`blog/articulo-1.html`	`index.html` (raíz)	`../index.html`	`..` sube un nivel
`blog/articulo-1.html`	`blog/index.html`	`index.html`	Mismo directorio
`blog/articulo-1.html`	`img/logo.png`	`../img/logo.png`	Subir y entrar en otra carpeta
Cualquiera	`img/logo.png`	`/img/logo.png`	`/` inicial: desde la raíz del sitio

📘 Concepto: Piensa en las rutas relativas como indicaciones desde donde estás: “la puerta de al lado” (contacto.html), “baja al sótano y entra en la segunda habitación” (blog/articulo-1.html), “sube una planta” (../). La ruta que empieza por / es como dar la indicación desde el portal del edificio, estés donde estés.

⚠️ Importante: Las rutas que empiezan por / dependen de dónde esté la raíz del servidor. Si publicas en una subcarpeta (como ocurre en GitHub Pages con usuario.github.io/mi-proyecto/), /img/logo.png apuntará a usuario.github.io/img/logo.png y fallará. Si no estás seguro, usa rutas relativas sin / inicial.

Anclas: enlaces a una sección de la página

Para saltar a una parte concreta, da un id al destino y enlaza con #id:

<nav>
  <a href="#ingredientes">Ingredientes</a> ·
  <a href="#preparacion">Preparación</a>
</nav>

<h2 id="ingredientes">Ingredientes</h2>
<p>...</p>

<h2 id="preparacion">Preparación</h2>
<p>...</p>

<a href="#">Volver arriba</a>

También puedes combinarlo con una ruta: <a href="recetas.html#postres"> abre recetas.html y salta a la sección postres.

💡 Consejo: href="#" o href="#top" llevan al principio de la página. Para que el desplazamiento sea suave en lugar de instantáneo, añade en CSS html { scroll-behavior: smooth; }.

El atributo `target`

Indica dónde se abre el enlace:

Valor	Efecto
`_self`	En la misma pestaña (valor por defecto)
`_blank`	En una pestaña o ventana nueva

<a href="https://www.boe.es" target="_blank" rel="noopener noreferrer">
  Boletín Oficial del Estado (se abre en una pestaña nueva)
</a>

⚠️ Importante: No abras en pestaña nueva todos los enlaces: el usuario pierde el control y el botón “Atrás” deja de funcionar. Úsalo solo cuando tenga sentido (documentos de referencia, enlaces desde un formulario a medio rellenar) y avisa en el texto o con un icono, por accesibilidad.

El atributo `rel`

Describe la relación entre tu página y la enlazada:

Valor	Significado
`noopener`	La página abierta no puede acceder a tu ventana mediante `window.opener` (seguridad)
`noreferrer`	No envía la cabecera `Referer` (la página destino no sabe de dónde vienes); implica `noopener`
`nofollow`	Pide a los buscadores que no sigan el enlace ni le transmitan relevancia
`sponsored`	Enlace patrocinado o de publicidad
`ugc`	Enlace en contenido generado por usuarios (comentarios, foros)

💡 Consejo: Los navegadores modernos ya aplican noopener por defecto a los enlaces con target="_blank", pero añadir rel="noopener noreferrer" sigue siendo una buena práctica defensiva.

Enlaces especiales: `mailto`, `tel` y `download`

<!-- Abre el programa de correo con el destinatario ya puesto -->
<a href="mailto:info@ejemplo.es">info@ejemplo.es</a>

<!-- En el móvil, inicia una llamada. Usa el prefijo internacional y sin espacios -->
<a href="tel:+34912345678">912 34 56 78</a>

<!-- Fuerza la descarga del fichero en lugar de abrirlo -->
<a href="docs/catalogo-2026.pdf" download>Descargar catálogo (PDF, 2,4 MB)</a>

<!-- Descarga con otro nombre -->
<a href="docs/cat-v7-final.pdf" download="catalogo-tienda-2026.pdf">Descargar catálogo</a>

⚠️ Importante: download solo funciona con ficheros del mismo origen (tu propio dominio). Con ficheros de otros sitios, el navegador ignorará el atributo y simplemente abrirá el enlace.

Textos de enlace accesibles

El texto de un enlace debe tener sentido por sí solo: los usuarios de lectores de pantalla suelen navegar por una lista de todos los enlaces de la página, fuera de contexto.

Mal	Bien
`Para ver la carta, <a>haz clic aquí</a>`	`Consulta <a>nuestra carta de temporada</a>`
`<a>Leer más</a>` (repetido 10 veces)	`<a>Leer más sobre la fabada asturiana</a>`
`<a>https://www.ejemplo.es/docs/2026/catalogo.pdf</a>`	`<a>Catálogo 2026 (PDF, 2,4 MB)</a>`

9. Comentarios

Los comentarios son notas en el código que el navegador ignora y el usuario no ve en la página:

<!-- Esto es un comentario de una línea -->

<!--
  Comentario de varias líneas.
  Útil para explicar secciones complejas.
-->

<!-- Desactivar temporalmente un bloque:
<p>Este párrafo no se mostrará.</p>
-->

⚠️ Importante: Los comentarios sí son visibles para cualquiera que mire el código fuente (Ctrl + U). Nunca dejes en ellos contraseñas, datos internos o comentarios que no quieras que lea un cliente.

💡 Consejo: En VS Code, Ctrl + / comenta o descomenta la línea actual o la selección. Los comentarios no pueden anidarse: no puedes meter un  dentro de otro.

10. Entidades de caracteres

Algunos caracteres tienen un significado especial en HTML. Si quieres mostrar un < en la página, el navegador pensará que empieza una etiqueta. Para estos casos existen las entidades.

📘 Concepto: Una entidad es un código que empieza por & y termina en ; y representa un carácter. Puede ser con nombre (<) o numérica (< en decimal o < en hexadecimal).

Entidades imprescindibles

Carácter	Entidad	Cuándo usarla
`<`	`<`	Siempre que quieras mostrar el símbolo “menor que”
`>`	`>`	Para mostrar “mayor que” (recomendable por simetría)
`&`	`&`	Para mostrar el ampersand
`"`	`"`	Comillas dobles dentro de un atributo delimitado con comillas dobles
`'`	`'`	Comilla simple dentro de un atributo delimitado con comillas simples
(espacio duro)	` `	Espacio que impide el salto de línea entre dos palabras

Otras entidades útiles

Carácter	Entidad	Descripción
©	`©`	Copyright
€	`€`	Euro
—	`—`	Raya
–	`–`	Semirraya (rangos: 10–20)
« »	`«` `»`	Comillas angulares (españolas)
…	`…`	Puntos suspensivos

💻 Ejemplo:

<p>En HTML, un párrafo se escribe con &lt;p&gt; y se cierra con &lt;/p&gt;.</p>
<p>Barnes &amp; Noble</p>
<p>&copy; 2026 Mi Empresa. Todos los derechos reservados.</p>
<p>El precio es de 25&nbsp;€ y el envío tarda 3&nbsp;días.</p>

Resultado:

En HTML, un párrafo se escribe con <p> y se cierra con </p>.
Barnes & Noble
© 2026 Mi Empresa. Todos los derechos reservados.
El precio es de 25 € y el envío tarda 3 días.

💡 Consejo: Con UTF-8, puedes escribir directamente ©, €, ñ, á o emojis sin entidades. Usa entidades solo para <, >, &, comillas en atributos,   y caracteres difíciles de teclear o invisibles.

11. Atributos globales

Los atributos globales se pueden usar en cualquier elemento HTML.

Atributo	Para qué sirve	Ejemplo
`id`	Identificador único en la página	`<section id="contacto">`
`class`	Una o varias clases (separadas por espacios) para CSS y JavaScript	`<p class="aviso importante">`
`title`	Información adicional que aparece como tooltip al pasar el ratón	`<abbr title="Hojas de estilo en cascada">CSS</abbr>`
`lang`	Idioma de ese elemento (si es distinto al de la página)	`<p lang="en">Hello world</p>`
`hidden`	Oculta el elemento (no se muestra ni lo leen los lectores de pantalla)	`<div hidden>...</div>`
`tabindex`	Controla si el elemento recibe el foco del teclado	`tabindex="0"`, `tabindex="-1"`
`style`	Estilos CSS en línea	`<p style="color: red">`
`data-*`	Datos personalizados para JavaScript o CSS	`<li data-precio="19.99">`

`id` vs. `class`

Característica	`id`	`class`
¿Cuántas veces por página?	Una sola (único)	Las que quieras
¿Cuántos por elemento?	Uno	Varias, separadas por espacios
Selector CSS	`#nombre`	`.nombre`
Usos típicos	Anclas (`#seccion`), asociar `label` con `input`, JavaScript	Aplicar estilos reutilizables
Analogía	El DNI de una persona	Una característica compartida: “socio”, “estudiante”

💡 Consejo: Nombra ids y clases en minúsculas, con palabras separadas por guiones y según su función, no su aspecto: aviso-error es mejor que texto-rojo (¿y si mañana el error se muestra en naranja?).

⚠️ Importante: Un id no puede contener espacios y debe ser único. Repetir un id rompe las anclas, la asociación de etiquetas de formulario y el JavaScript que lo use. El validador te avisará con Duplicate ID.

Atributos `data-*`

Permiten guardar información propia en un elemento, sin inventar atributos no válidos:

<ul class="productos">
  <li data-id="1043" data-categoria="portatiles" data-stock="12">Portátil Ultra 14</li>
  <li data-id="1044" data-categoria="tablets" data-stock="0">Tablet Pro 11</li>
</ul>

El nombre va después de data-, en minúsculas y con guiones.
Desde JavaScript se leen con elemento.dataset.categoria.
Desde CSS se pueden usar en selectores: [data-stock="0"] { opacity: 0.5; }.

⚠️ Importante: No uses title para información importante: no aparece en móviles (no hay “pasar el ratón”), no lo ven los usuarios de teclado y los lectores de pantalla no siempre lo leen. Úsalo solo como complemento.

12. Contenedores genéricos: `div` y `span`

A veces necesitas agrupar contenido para darle estilo o manipularlo con JavaScript, pero ninguna etiqueta con significado encaja. Para eso existen los contenedores genéricos, que no aportan ningún significado.

Elemento	Tipo	Uso
`<div>`	Bloque	Agrupar bloques de contenido (por ejemplo, para crear una tarjeta o una columna)
`<span>`	En línea	Envolver un fragmento de texto dentro de una línea

<div class="tarjeta">
  <h3>Plan Básico</h3>
  <p class="precio"><span class="cantidad">9</span><span class="moneda">€</span>/mes</p>
  <p>Ideal para empezar.</p>
</div>

📘 Concepto: div y span son como cajas de cartón sin etiquetar: útiles para agrupar cosas, pero no dicen nada de lo que contienen. Las etiquetas semánticas (p, nav, article, strong…) son cajas con etiqueta, que tanto el navegador como los buscadores y los lectores de pantalla entienden.

⚠️ Importante: Usa div y span solo cuando no exista una etiqueta más adecuada. El abuso de div (la llamada “divitis”) produce páginas difíciles de mantener e inaccesibles. En el módulo 06 aprenderás las etiquetas semánticas de HTML5 que sustituyen a muchos div.

13. Ejemplo completo: una página de receta

💻 Ejemplo: Reunimos todo lo aprendido en una página real (receta.html):

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Receta tradicional de tortilla de patatas paso a paso, con o sin cebolla.">
  <title>Tortilla de patatas: receta tradicional | Recetas de la abuela</title>
</head>
<body>
  <!-- Índice de la página con anclas -->
  <p><a href="#ingredientes">Ingredientes</a> · <a href="#preparacion">Preparación</a> · <a href="#glosario">Glosario</a></p>
  </p>

  <h1>Tortilla de patatas</h1>
  <p>
    Publicada el <time datetime="2026-10-03">3 de octubre de 2026</time>.
    Tiempo de preparación: <time datetime="PT45M">45 minutos</time>.
  </p>
  <p>
    La tortilla es <strong>el plato más universal</strong> de la cocina española.
    Y sí: la eterna pregunta es si lleva cebolla o <em>no</em>.
  </p>

  <h2 id="ingredientes">Ingredientes (4 personas)</h2>
  <ul>
    <li>5 patatas medianas</li>
    <li>6 huevos <small>(mejor camperos)</small></li>
    <li>1 cebolla <mark>opcional</mark></li>
    <li>Aceite de oliva virgen extra</li>
    <li>Sal</li>
  </ul>

  <h2 id="preparacion">Preparación</h2>
  <ol>
    <li>Pela y corta las patatas en láminas finas.</li>
    <li>
      <dfn>Confita</dfn> las patatas en abundante aceite a fuego medio:
      <ul>
        <li>Con cebolla: añádela a los 10 minutos.</li>
        <li>Sin cebolla: sigue con el paso siguiente.</li>
      </ul>
    </li>
    <li>Bate los huevos con sal y mézclalos con las patatas escurridas.</li>
    <li>Cuaja la tortilla por ambos lados en una sartén de 24&nbsp;cm.</li>
  </ol>

  <hr>

  <h2 id="glosario">Glosario</h2>
  <dl>
    <dt>Confitar</dt>
    <dd>Cocinar un alimento sumergido en grasa a baja temperatura.</dd>
    <dt>Cuajar</dt>
    <dd>Hacer que el huevo pase de líquido a sólido con el calor.</dd>
  </dl>

  <p>
    ¿Dudas? Escríbenos a <a href="mailto:recetas@ejemplo.es">recetas@ejemplo.es</a>
    o descarga la <a href="docs/recetario.pdf" download>receta en PDF (300 KB)</a>.
  </p>
  <p>Más información en la <a href="https://es.wikipedia.org/wiki/Tortilla_de_patatas" target="_blank" rel="noopener noreferrer">Wikipedia (se abre en una pestaña nueva)</a>.</p>

  <p><small>&copy; 2026 Recetas de la abuela</small></p>
  <p><a href="#">Volver arriba</a></p>
</body>
</html>

Resultado esperado: una página con un índice de enlaces que saltan a cada sección, un título principal, la fecha, una lista de ingredientes con viñetas, una lista numerada de pasos con una sublista, un glosario con términos y definiciones y enlaces de correo, descarga y externo. Valídala en el W3C: no debe dar errores.

14. Errores comunes y buenas prácticas

Error	Problema	Solución
Olvidar cerrar etiquetas	El navegador “adivina” y el resultado varía	Cierra siempre; usa Emmet y el validador
Anidar mal (`<b><i>texto</b></i>`)	HTML inválido, estilos impredecibles	El último que se abre, el primero que se cierra
Usar `<br><br>` para separar	Mezcla presentación y contenido	Párrafos distintos y `margin` en CSS
Elegir `h3` porque “se ve del tamaño adecuado”	Jerarquía rota para lectores de pantalla y SEO	Elige por jerarquía; ajusta el tamaño con CSS
`<a>Haz clic aquí</a>`	Inaccesible fuera de contexto	Texto descriptivo del destino
Ids repetidos	Anclas y formularios rotos	Usa `class` para lo que se repite
Atributos inventados (`<div precio="5">`)	HTML inválido	Usa `data-precio="5"`
Listas con hijos que no son `li`	HTML inválido	Las sublistas van dentro de un `li`

💡 Consejo: Lee tu HTML sin estilos (en Firefox: Ver → Estilo de página → Sin estilo). Si el documento se entiende bien así, con sus títulos, párrafos y listas, tu estructura es buena.

15. Ejercicios

Ejercicio 1: Currículum en HTML

Crea curriculum.html con tu currículum (puede ser ficticio). Debe tener: tu nombre como h1; secciones h2 para “Perfil”, “Experiencia”, “Formación” e “Idiomas”; dentro de “Experiencia”, un h3 por puesto con las fechas en elementos time con su datetime; una lista desordenada de habilidades; y tu email como enlace mailto y tu teléfono como enlace tel.

Ejercicio 2: Elige la etiqueta correcta

Marca este texto con las etiquetas de formato adecuadas (strong, em, abbr, cite, q, time, kbd, code, sub, sup, small, s, mark):

AVISO: la reunión del 15 de diciembre de 2026 se traslada a las 17:00.
La fórmula del agua es H2O y la superficie del aula es de 60 m2.
Para guardar, pulsa Ctrl + S. Para mostrar un mensaje usa console.log().
Mi libro favorito es Cien años de soledad. Como decía mi abuelo, "quien madruga, Dios le ayuda".
La ONU se fundó en 1945. Precio antes: 50 €. Ahora: 35 €. Oferta válida hasta fin de existencias.

Ejercicio 3: Navegación entre páginas

Crea esta estructura de carpetas y ficheros y enlázalos para que desde cualquier página se pueda llegar a todas las demás usando solo rutas relativas (sin / inicial):

ejercicio-enlaces/
├── index.html
├── contacto.html
├── productos/
│   ├── index.html
│   ├── bicicletas.html
│   └── accesorios/
│       └── cascos.html
└── docs/
    └── garantia.pdf

Incluye además un enlace de descarga de garantia.pdf en cascos.html.

Ejercicio 4: Página larga con índice

Crea una página de preguntas frecuentes de una academia con al menos 8 preguntas. Al principio, incluye un índice con una lista de enlaces que salten a cada pregunta (anclas). Cada pregunta debe ser un h2 con su id y, al final de cada respuesta, un enlace “Volver al índice”. Añade en un style del head la regla html { scroll-behavior: smooth; } y observa el efecto.

Ejercicio 5: Listas de todo tipo

Crea una página “Guía del estudiante” con:

Una lista ordenada del horario de un día (que empiece en la hora 8 con start="8").
Una lista desordenada de material necesario con, al menos, una sublista anidada.
Una lista de descripción con 5 términos informáticos y su definición.
Una clasificación “Top 5” de asignaturas usando reversed.

Ejercicio 6: Corrige el código

Encuentra y corrige todos los errores de este documento (hay al menos 10). Comprueba tu solución con el validador del W3C:

<!DOCTYPE html>
<html>
<head>
  <title>Mi tienda</title>
</head>
<body>
  <h1>Bienvenidos</h1>
  <h1>Ofertas</h1>
  <h4>Bicicletas</h4>
  <p>Las mejores <b><i>bicicletas</b></i> de la ciudad.
  <p>Precio: 300 € <br><br><br>
  <ul>
    <li>Montaña</li>
    <ul><li>Doble suspensión</li></ul>
    <p>Carretera</p>
  </ul>
  <a href="C:\Users\Ana\web\contacto.html">Haz clic aquí</a>
  <div id="pie" precio="gratis">Envío gratis</div>
  <div id="pie">Copyright 2026</div>
</body>
</html>

Ejercicio 7: Ficha de producto con datos

Crea la ficha de un producto de una tienda de electrónica con: título, descripción con texto destacado, precio actual y precio anterior tachado, lista de características técnicas en una lista de descripción, enlace para descargar el manual en PDF, enlace externo al fabricante en pestaña nueva con rel adecuado, y un div contenedor con atributos data-sku, data-categoria y data-stock. Usa div y span solo donde no haya una etiqueta más adecuada.

Resumen

Concepto	Sintaxis / idea clave
Doctype	`<!DOCTYPE html>` en la primera línea
Raíz e idioma	`<html lang="es">`
Codificación	`<meta charset="UTF-8">` al principio del `head`
Viewport	`<meta name="viewport" content="width=device-width, initial-scale=1">`
Título	`<title>Contenido \\| Sitio</title>`, único por página
Elemento	Apertura + contenido + cierre: `<p>Texto</p>`
Elementos vacíos	`br`, `hr`, `img`, `input`, `meta`, `link`
Atributos	`nombre="valor"` en la etiqueta de apertura; booleanos sin valor
Bloque / en línea	Bloque: línea nueva y todo el ancho. En línea: dentro del texto
Encabezados	`h1` a `h6`; un `h1`, sin saltar niveles
Párrafo / salto / tema	`p`, `br`, `hr`
Importancia / énfasis	`strong` / `em`
Otros formatos	`mark`, `small`, `s`, `del`, `ins`, `sub`, `sup`, `abbr`, `dfn`, `cite`, `q`, `time`, `code`, `kbd`, `samp`, `var`
Bloques de texto	`pre` (respeta espacios), `blockquote` (cita larga)
Listas	`ul`, `ol` (`start`, `reversed`, `type`), `dl` con `dt` y `dd`
Enlace	`<a href="...">texto descriptivo</a>`
Rutas	Absolutas (`https://...`), relativas (`carpeta/pag.html`, `../`), raíz (`/`)
Ancla	`href="#id"`
Nueva pestaña	`target="_blank" rel="noopener noreferrer"`
Especiales	`mailto:`, `tel:`, `download`
Comentario	`<!-- texto -->`
Entidades	`<` `>` `&` `"` ` ` `©`
Atributos globales	`id`, `class`, `title`, `lang`, `hidden`, `tabindex`, `data-*`
Genéricos	`div` (bloque), `span` (en línea): solo si no hay etiqueta semántica

Navegación
← Módulo anterior: Entorno de trabajo	Siguiente módulo: Imágenes y multimedia →