HTML
Las etiquetas con las que se describe una página: las clásicas de HTML4, la estructura semántica de HTML5, el marcado del texto y del contenido multimedia, los formularios con validación nativa y las API que el navegador ofrece a la página.
Las etiquetas clásicas: bloque, línea, tablas y listas
HTML no es un lenguaje de programación: es un lenguaje de marcado. No dice qué hacer, dice qué es cada trozo de contenido. El repertorio heredado de HTML4 se organiza en dos familias por su comportamiento visual por defecto: los elementos de bloque, que ocupan todo el ancho disponible y empiezan en línea nueva, y los elementos en línea, que fluyen dentro del texto.
| Etiqueta | Para qué sirve |
|---|---|
| <div> | Contenedor de bloque genérico: una caja o capa sin significado propio |
| <span> | Contenedor en línea genérico, para marcar un trozo dentro de un texto |
| <table> | Tabla, con cabecera <th>, filas <tr>, celdas <td> y pie <tfoot> |
| <pre> | Texto preformateado: conserva espacios y saltos de línea tal cual |
| <blockquote> | Cita larga en bloque |
| <ul> y <ol> | Lista sin ordenar y lista ordenada; sus elementos son <li> |
| <dl> | Lista de descripciones: cada término va en <dt> y su explicación en <dd> |
| <a> | Enlace y ancla de referencia |
| <img> | Imagen |
| <embed> y <object> | Recursos externos incrustados en la página |
<h2>Resultados del intento</h2>
<table>
<thead>
<tr><th>Tema</th><th>Aciertos</th><th>Fallos</th></tr>
</thead>
<tbody>
<tr><td>Aplicaciones web</td><td>18</td><td>2</td></tr>
<tr><td>Bases de datos</td><td>14</td><td>6</td></tr>
</tbody>
<tfoot>
<tr><td>Total</td><td>32</td><td>8</td></tr>
</tfoot>
</table>
<p>Repasa el <a href="/temario/bases-de-datos">tema de bases de datos</a>.</p>La etiqueta <frame>, que dividía la ventana en marcos independientes, aparece todavía en muchos temarios pero está obsoleta: HTML5 la retiró y solo mantiene <iframe> para incrustar una página dentro de otra.
Para el examen
Elemento de bloque: ocupa todo el ancho y empieza en línea nueva
Tabla: table con th, tr, td y tfoot
Listas: ul, ol y dl, esta con dt y dd
Obsoleto: frame; solo queda iframe
HTML5: el DOCTYPE y la estructura semántica de la página
Un documento HTML5 empieza siempre por la declaración <!DOCTYPE html>. Es la más corta de la historia del lenguaje precisamente porque HTML5 rompió con SGML: HTML 4.01 era una aplicación de SGML y necesitaba declarar qué gramática seguía, mientras que HTML5 se define por sí mismo y no es un lenguaje SGML.
La aportación de HTML5 que más se pregunta es la estructura semántica: un puñado de etiquetas que no cambian nada en pantalla pero que dicen qué papel juega cada zona de la página. Sin ellas todo serían <div> indistinguibles. Sirven a los buscadores para indexar mejor (SEO) y a los lectores de pantalla para que una persona ciega pueda saltar directamente al contenido principal, por lo que la semántica es un complemento directo de la accesibilidad.
| Etiqueta | Qué zona marca |
|---|---|
| <header> | Encabezado, de la página entera o de una sección |
| <nav> | Panel de navegación, el menú de enlaces |
| <main> | Contenido principal. Puede haber varios en el código, pero solo uno visible: el resto van ocultos con hidden |
| <section> | Agrupación temática de contenido dentro del documento |
| <article> | Contenido independiente y completo, que se entiende fuera de la página y puede reutilizarse o redistribuirse |
| <aside> | Información tangencial o complementaria, relacionada con la sección o el artículo |
| <footer> | Pie de página o de sección |
La disposición habitual, y la que dibujan todos los esquemas de esta materia, coloca el <header> ocupando la banda superior; debajo, en la misma fila, el <nav> a un lado, el <main> en el centro y el <aside> al otro lado; y cerrando la página, el <footer> de lado a lado. Es solo la colocación típica: las etiquetas no imponen posición, la posición la pone el CSS.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Tema 7 - Aplicaciones web</title>
</head>
<body>
<header>Llegando al Corte</header>
<nav>
<a href="/temario">Temario</a>
<a href="/tests">Tests</a>
</nav>
<main>
<article>
<h1>Documento bien formado y documento válido</h1>
<p>Un documento puede estar bien formado y no ser válido.</p>
</article>
</main>
<aside>Llevas 12 de 33 temas superados.</aside>
<footer>Curso Largo - promoción 2026</footer>
</body>
</html><section> agrupa; <article> es autosuficiente. La prueba práctica: si el contenido se entiende publicado por separado en otro sitio, es un <article>.
Para el examen
section: agrupa contenido relacionado
article: contenido autosuficiente
La prueba para distinguirlos: si se entiende publicado por separado, es un article
Semántica en el texto, contenido incrustado y multimedia
HTML5 reinterpretó varias etiquetas antiguas para que dejaran de significar un aspecto y pasaran a significar una intención. El navegador las sigue pintando igual que antes, pero un lector de pantalla o un buscador ya pueden distinguirlas.
| Etiqueta | Significado en HTML5 |
|---|---|
| <strong> | Importancia fuerte. Es el sustituto semántico de la negrita |
| <b> | Llamar la atención sobre un texto sin darle más importancia |
| <em> | Énfasis. Es el sustituto semántico de la cursiva |
| <i> | Texto con voz o tono alternativo: un tecnicismo, un extranjerismo |
| <time> | Una fecha o una hora legibles también por la máquina |
| <var> | El nombre de una variable |
| <code> | Un fragmento de código fuente |
| <kbd> | Una tecla o combinación de teclas que el usuario pulsa |
| <figure> y <figcaption> | Contenido autocontenido (imagen, vídeo, esquema) y su leyenda |
Para incrustar contenido ajeno está <iframe>, que mete una página externa dentro de otra. Su atributo sandbox es una medida de seguridad: aísla esa página y le quita permisos peligrosos, como ejecutar scripts o enviar formularios. Desde ahí se pueden ir devolviendo permisos uno a uno con los valores allow-*, lo que convierte al sandbox en una lista blanca en lugar de un todo o nada.
- <picture>: ofrece varias imágenes distintas y deja que el navegador elija según el tamaño de pantalla.
- <dialog>: ventana emergente o modal nativa del navegador, sin librerías.
- <template>: fragmento de marcado que no se pinta y que el JavaScript clona cuando lo necesita.
- <bdi> y <bdo>: control de la dirección del texto, para lenguas que se escriben de derecha a izquierda.
- <ruby>: anotaciones fonéticas sobre los caracteres, propias de las lenguas asiáticas.
En multimedia, HTML5 acabó con la necesidad de complementos externos. <audio> y <video> reproducen sonido e imagen de forma nativa, <track> añade subtítulos o descripciones a ese vídeo, y <canvas> es un lienzo de mapa de bits sobre el que se dibuja desde JavaScript. Aparte va <svg>, que no es un mapa de bits sino un gráfico vectorial escrito en XML: se compone de órdenes de dibujo, así que se escala sin perder calidad, y su tipo MIME es image/svg+xml.
<canvas> guarda píxeles y se pinta desde JavaScript; <svg> guarda órdenes de dibujo en XML y se puede escalar indefinidamente. Es la comparación que más cae.
Para el examen
canvas: guarda píxeles y se pinta desde JavaScript
svg: guarda órdenes de dibujo en XML y escala sin perder calidad
Por qué importa: es la comparación que más cae
Formularios: la validación nativa del navegador
Antes de HTML5, comprobar que un campo estaba relleno o que un correo tenía forma de correo exigía escribir JavaScript. HTML5 metió esa inteligencia dentro del propio navegador: basta con declarar el requisito en un atributo y el navegador impide enviar el formulario y muestra el mensaje de error él solo.
| Atributo | Qué impone o qué facilita |
|---|---|
| required | El campo no puede quedar vacío |
| pattern | El valor tiene que encajar en una expresión regular |
| min y max | Límite inferior y superior en números y fechas |
| placeholder | Texto de ejemplo dentro del campo, que desaparece al escribir |
| autofocus | El campo recibe el foco al cargar la página |
| autocomplete | Permite o impide que el navegador rellene el campo por el usuario |
| list | Asocia el campo a un <datalist> de sugerencias |
| multiple | Admite varios valores en el mismo campo |
<form action="/matricula" method="post">
<label for="expediente">Número de expediente</label>
<input type="text" id="expediente" name="expediente"
pattern="[0-9]{4}-[A-Z]{2}"
placeholder="2026-TA"
required>
<label for="temas">Temas que quieres repasar esta semana</label>
<input type="number" id="temas" name="temas" min="1" max="33" required>
<button type="submit">Matricularme</button>
</form>Conviene recordar lo del subtema anterior: esta validación es del cliente. Vale para avisar al usuario en el acto, pero un atacante puede enviar la petición sin pasar por el formulario. El servidor tiene que repetir las mismas comprobaciones antes de dar por buena la matrícula.
Para el examen
Atributos de validación nativa: required, pattern, min y max
Atributos de ayuda: placeholder, autofocus y multiple
Su límite: es validación de cliente: el servidor debe repetir las comprobaciones
Nuevos tipos de campo, atributos data-* y atributos booleanos
El atributo type de <input> dejó de tener cuatro valores para tener más de veinte. Cada tipo nuevo aporta dos cosas: una comprobación de formato gratuita y un teclado o un control adecuado en el móvil, como el calendario de date o la rueda de color de color.
- Texto especializado: email, url, tel, search.
- Números: number, con caja de incremento, y range, que se pinta como deslizador.
- Fechas y horas: date, time, month, week y datetime-local.
- Otros: color, que abre el selector de color del sistema.
Un aviso: el valor datetime que figura en muchos temarios se retiró del estándar por la ambigüedad con las zonas horarias. El que hay que citar es datetime-local.
Los atributos personalizados data-* son la vía oficial para colgar información propia de una etiqueta sin inventarse atributos que romperían la validación. Cualquier atributo que empiece por data- es válido, y desde JavaScript se leen todos juntos a través de la propiedad dataset, que convierte data-nivel-tema en dataset.nivelTema. Desde CSS se seleccionan como cualquier otro atributo.
<li id="tema-7" data-bloque="3" data-nivel="1" data-superado="no">
Aplicaciones web
</li>
<script>
const tema = document.querySelector("#tema-7");
console.log(tema.dataset.bloque); // "3"
console.log(tema.dataset.superado); // "no"
</script>
<style>
li[data-superado="no"] { color: crimson; }
li[data-nivel="1"] { font-weight: bold; }
</style>Los atributos booleanos funcionan de una forma que se pregunta con frecuencia porque es contraintuitiva: lo que decide su valor es su presencia, no su contenido. Si el atributo está, es verdadero; si no está, es falso. No se puede desactivar poniéndole el texto false, porque cualquier valor sigue siendo presencia. Las tres formas válidas de escribir un booleano verdadero son el nombre a secas, el nombre igualado a sí mismo y el nombre igualado a la cadena vacía.
<!-- Las tres son equivalentes: la pregunta queda marcada y bloqueada -->
<input type="checkbox" name="revisar" checked disabled>
<input type="checkbox" name="revisar" checked="checked" disabled="disabled">
<input type="checkbox" name="revisar" checked="" disabled="">
<!-- ESTO NO LA DESACTIVA: el atributo sigue presente -->
<input type="checkbox" name="revisar" disabled="false">Para el examen
Valores de type: pasó de cuatro a más de veinte
Qué aporta cada tipo nuevo: comprobación de formato y un control adecuado en el móvil
Atributos data-: guardan datos propios del desarrollador
Atributos booleanos: valen por su presencia, sin valor
La cabecera del documento y los elementos vacíos
Dentro de <head> no hay contenido visible: hay metainformación, es decir, datos sobre el documento dirigidos al navegador y a los buscadores. Las dos etiquetas que la transportan son <meta> y <link>.
| Declaración | Para qué sirve |
|---|---|
| <meta charset="utf-8"> | Juego de caracteres del documento. Equivale a la at-rule @charset de CSS |
| <meta name="keywords"> | Palabras clave del documento, pensadas para los buscadores |
| <meta name="author"> | Autor del documento |
| <link rel="stylesheet" href="..."> | Enlaza la hoja de estilo CSS |
| <link rel="alternate"> | Declara otra versión o vista de la misma página |
| <link hreflang="en" href="..."> | Declara la misma página en otro idioma |
| <link rel="prev"> y <link rel="next"> | Encadenan una página con la anterior y la siguiente para paginar |
| <link media="print"> o media="screen" | Aplica esa hoja solo al imprimir o solo en pantalla |
Hay que distinguir <link> de <a>, que es un error clásico: <link> declara una relación entre el documento y otro recurso, y no es visible ni se puede pinchar; <a> es el enlace navegable que ve el usuario.
Los elementos vacíos, o void elements, son los que no pueden tener contenido y por tanto no llevan etiqueta de cierre. En HTML5 tampoco necesitan la barra final que exigía XHTML: escribir <br> es correcto. Los más citados son area, base, br, col, embed, hr, img, input, link, meta, param, source, track y wbr. Las listas antiguas añaden command y keygen, que ya se retiraron del estándar.
En los enlaces, el atributo target decide dónde se abre el documento enlazado: _self lo abre en el mismo marco y es el valor por defecto, _blank abre una ventana o pestaña nueva, _parent lo abre en el marco padre, _top ocupa la ventana entera rompiendo los marcos, y un nombre suelto lo abre en el iframe que se llame así.
Para el examen
Qué hay en head: nada visible
meta charset: fija el juego de caracteres
meta name: declara palabras clave o autor
link: enlaza la hoja de estilo, versiones alternativas e idiomas