Guía de oposiciones · Bloque III · Tema 21 · Actualizada a septiembre de 2026
Este tema no se pregunta por definiciones, se pregunta por fronteras: qué separa HTML de XHTML, un XML bien formado de uno válido, CSS de XSL, o lo que corre en el navegador de lo que corre en el servidor. El tribunal escribe la definición correcta al lado del nombre equivocado y espera que vayas rápido. Ha caído en 2023, 2024 y 2026, y además aparece en los supuestos prácticos. Aquí tienes las seis fronteras, tres preguntas reales resueltas y el esquema de memorización.
Dónde se ejecuta cada cosa: front-end, back-end y renderizado
Una aplicación web se parte en dos mitades. El front-end es lo que se ejecuta en el navegador: HTML para la estructura, CSS para la presentación y JavaScript para el comportamiento. El back-end es lo que se ejecuta en el servidor: la lógica de negocio y el acceso a los datos.
La pregunta de examen no suele ser esa, sino dónde se genera el HTML. En el renderizado en servidor (Server Side Rendering, SSR) el servidor devuelve la página ya construida. En el renderizado en cliente (Client Side Rendering, CSR) el servidor manda un esqueleto y es JavaScript quien lo rellena en el navegador.
Y una tercera pieza que el tribunal mezcla con las anteriores: AJAX (y su equivalente moderno, fetch) sirve para pedir datos al servidor sin recargar la página. No renderiza nada por sí mismo. Lo mismo pasa con WebSocket, que abre un canal bidireccional permanente, y con Server Sent Events, que manda eventos del servidor al cliente en un solo sentido. Ninguno de los tres es «renderizar en el servidor», y esa es exactamente la trampa del supuesto de 2024.
| Técnica | Qué hace | Dónde |
|---|---|---|
| SSR | El servidor genera el HTML completo | Servidor |
| CSR | El navegador construye el HTML con JavaScript | Cliente |
| AJAX / fetch | Pide datos sin recargar la página | Cliente pide, servidor responde |
| WebSocket | Canal bidireccional permanente | Ambos |
| Server Sent Events | Eventos del servidor al cliente, un solo sentido | Servidor empuja |
HTML5: el DOCTYPE, la estructura y los eventos
HTML es un lenguaje de marcado, no de programación: describe la estructura del contenido. Deriva de SGML, el metalenguaje del que salieron tanto HTML como XML. La versión vigente, HTML5, la mantiene el WHATWG como living standard, en colaboración con el W3C.
Sobre la estructura, el dato que cae literal: la declaración <!DOCTYPE html> va en la primera línea, antes del elemento raíz <html>. No va dentro del <head>, ni dentro del <html>, ni al principio del <body>. Después, el documento se organiza en <head> (metadatos, título, enlaces a hojas de estilo) y <body> (el contenido visible).
De los eventos se pregunta el que corresponde a cada gesto del ratón, y las cuatro opciones se parecen a propósito: onmouseover se dispara al entrar el puntero en el elemento, onmouseout al salir, onmousedown al presionar el botón y onclick al pulsar completo.
XML: bien formado frente a válido, y qué es XHTML
Aquí está la distinción que más cae del tema, y es de las que se responden en dos segundos si la tienes clara.
| Concepto | Qué exige |
|---|---|
| Bien formado | Cumple la sintaxis XML: un único elemento raíz, etiquetas cerradas y correctamente anidadas, atributos entre comillas |
| Válido | Además de bien formado, cumple una gramática que define su estructura: un DTD o un XSD (XML Schema) |
Todo documento válido es bien formado, pero no al revés. Y sobre el elemento raíz: un documento XML bien formado tiene uno solo, que contiene a todos los demás. El prólogo (la declaración <?xml …?> y las instrucciones de procesamiento) no cuenta como elemento, que es justo por donde se cuelan las respuestas falsas.
XHTML es HTML reformulado como XML: hereda el rigor de XML y por eso exige minúsculas en las etiquetas, cerrar todos los elementos y comillas en los valores de los atributos. Cuando una pregunta enuncia esas reglas atribuyéndoselas a HTML, está invertida.
CSS y el diseño responsive, y por qué XSL no es lo mismo
CSS es el lenguaje de estilos de la web: color, tipografía, espaciado y disposición. El diseño responsive se consigue con media queries, que aplican reglas distintas según el ancho del dispositivo. Alrededor de CSS viven los preprocesadores como Sass y los frameworks de estilos como Bootstrap.
La confusión de examen es con XSL. XSL es la familia de lenguajes para transformar y presentar documentos XML (XSLT transforma un XML en otro formato). Si la pregunta habla de cambiar el aspecto de algo en el frontal web, la respuesta es CSS; XML estructura datos, SGML es el metalenguaje de origen y XSL trabaja sobre XML.
JavaScript, JSON y el scripting de servidor
JavaScript es el lenguaje de script que los navegadores ejecutan de forma nativa; su estándar se llama ECMAScript. Actúa sobre el DOM, la representación en árbol del documento que el navegador construye y que JavaScript puede leer y modificar. Ni Python, ni Java, ni SQL se ejecutan nativamente en el navegador, y ese contraste es una pregunta de supuesto práctico tal cual.
JSON es un formato de intercambio de datos definido en el RFC 8259. Su lista de valores hay que sabérsela literal, porque las opciones falsas meten tipos que suenan razonables y no existen: un valor JSON es un object, un array, un number, un string o uno de los literales true, false y null. No hay date, ni function, ni undefined, ni NaN. En JavaScript se pasa de uno a otro con JSON.parse (cadena a objeto) y JSON.stringify (objeto a cadena).
En el servidor el scripting se hace con lenguajes como PHP, cuya superglobal $_SESSION mantiene el estado entre peticiones. Las plataformas de servidor de mayor calado, Java EE / Jakarta EE y .NET, son el tema 19 y tienen su propia guía.
Frameworks: cuáles son de JavaScript y cuál te van a colar
Los frameworks y librerías de front-end más preguntados son Angular, React y Vue. La pregunta clásica es del tipo «cuál NO es un framework para JavaScript», y la respuesta falsa se construye metiendo algo del ecosistema Java: JDBC es la API de acceso a bases de datos de Java y no tiene nada que ver con JavaScript. Ojo también con Bootstrap, que sí se usa en el frontal web aunque sea de estilos: en la pregunta de 2023 no era la respuesta.
Sobre navegadores, lo que se pregunta es qué motor ejecuta el estándar y qué se puede dar por soportado en Chrome, Edge y Firefox. Y todo lo relativo a accesibilidad y usabilidad (WCAG, ARIA, el RD 1112/2018) pertenece al tema 22 y está desarrollado en la guía de accesibilidad y usabilidad web: aquí no se repite.
Una última frontera que conviene no cruzar en el examen: Selenium aparece a menudo cerca de estos nombres, pero no es un framework de front-end, sino una herramienta para automatizar pruebas controlando el navegador. Eso pertenece al tema 23, en la guía de control de versiones, metodologías y pruebas.
Esquema de memorización
Los datos que se repiten convocatoria tras convocatoria, en una tabla para el repaso de última hora.
| Concepto | Clave |
|---|---|
| Front-end / back-end | HTML+CSS+JS en el navegador / lógica y datos en el servidor |
| SSR / CSR | El servidor genera el HTML / lo construye el navegador con JavaScript |
| AJAX / fetch | Pedir datos al servidor sin recargar la página |
| HTML | Lenguaje de marcado (deriva de SGML) · HTML5 del WHATWG |
| DOCTYPE | Primera línea, antes del <html> |
| onmouseover | Al situar el puntero sobre el elemento (onmouseout, al salir) |
| XML bien formado | Un único elemento raíz · etiquetas cerradas y anidadas · el prólogo no cuenta |
| Bien formado vs válido | Sintaxis XML / además cumple un DTD o XSD |
| XHTML | HTML como XML: minúsculas, cierre obligatorio y comillas |
| XSL vs CSS | Transforma XML / da estilo al frontal web |
| CSS | Presentación · responsive con media queries · Bootstrap, Sass |
| JavaScript | Script nativo del navegador · estándar ECMAScript · actúa sobre el DOM |
| JSON (RFC 8259) | object · array · number · string · true, false, null |
| JSON.parse / stringify | Cadena → objeto / objeto → cadena |
| PHP | Script de servidor · superglobal $_SESSION |
| Frameworks JS | Angular, React, Vue · JDBC NO (es Java y bases de datos) |
Tres preguntas reales de examen
De los exámenes oficiales, con la respuesta de la plantilla del INAP. En los apuntes completos hay nueve de este tema, resueltas y razonadas.
¿Cuál de las siguientes es una diferencia entre HTML y XHTML?
- HTML exige que las etiquetas se escriban en minúscula, mientras que XHTML no.
- XHTML permite que haya elementos no vacíos sin cerrar, mientras que HTML no.
- En HTML es obligatorio que los valores de los atributos vayan entre comillas, mientras que en XHTML no.
- En XHTML es obligatoria la presencia del elemento <head>.
Ver solución
Según la definición estándar de JSON, RFC 8259, un valor JSON debe pertenecer a uno de estos tipos o literales. ¿Cuál es el conjunto correcto?
- object, array, number, string, date y undefined.
- object, array, number, string, boolean y function.
- object, array, number, string, true, false y null.
- object, array, number, string, boolean y NaN.
Ver solución
¿Cuál de los siguientes NO es un framework para javascript?
- Angular
- Bootstrap
- React
- JDBC
Ver solución
Preguntas frecuentes
¿Qué diferencia hay entre HTML y XHTML?
XHTML es HTML reformulado como XML, así que hereda su rigor sintáctico. En la práctica eso significa tres exigencias que HTML no impone: las etiquetas van en minúscula, todos los elementos se cierran (incluidos los vacíos, como <br />) y los valores de los atributos van entre comillas. Si una pregunta atribuye esas reglas a HTML, está invertida.
¿Qué diferencia hay entre un XML bien formado y uno válido?
Bien formado es cumplir la sintaxis del propio XML: un único elemento raíz, etiquetas cerradas y bien anidadas, y atributos entrecomillados. Válido es todo lo anterior y además ajustarse a una gramática que define qué elementos puede haber y en qué orden, escrita como DTD o como XSD (XML Schema). Todo documento válido es bien formado; al revés no.
¿Qué diferencia hay entre renderizado en servidor y en cliente?
En el renderizado en servidor (SSR) el servidor devuelve la página ya construida en HTML, lo que suele ir mejor para contenido extenso y para el posicionamiento. En el renderizado en cliente (CSR) el servidor manda un documento mínimo y es JavaScript quien construye la página en el navegador. Cuidado con confundirlos con AJAX, WebSocket o Server Sent Events: esos sirven para intercambiar datos, no para renderizar.
¿Qué diferencia hay entre CSS y XSL?
CSS es el lenguaje de estilos de la web: define cómo se ve el HTML en el navegador. XSL es una familia de lenguajes para trabajar sobre documentos XML, y su parte más conocida, XSLT, transforma un XML en otro formato. Regla rápida de examen: si la pregunta habla del frontal web, la respuesta es CSS.