B3-T8: HTML5, CSS3, XML y Lenguajes de Marcas
Este tema combina dos áreas: (1) HTML5+CSS3 para desarrollo web frontend y (2) lenguajes de marcas/intercambio de datos (XML, JSON, YAML). Ambas aparecen consistentemente en el examen TAI.
HTML5
Fuente: WHATWG HTML Living Standard (html.spec.whatwg.org) — estándar vivo, público. W3C HTML5 Recommendation (w3.org/TR/html5).
ARQUITECTURA WEB Y MOTORES DE NAVEGADOR
| Navegador | Motor de renderizado | Motor JavaScript |
|---|
| Chrome | Blink | V8 |
| Edge (Chromium) | Blink | V8 |
| Firefox | Gecko | SpiderMonkey |
| Safari | WebKit | JavaScriptCore (Nitro) |
| Opera | Blink | V8 |
ETIQUETAS SEMÁNTICAS HTML5
| Etiqueta | Función | Reemplaza |
|---|
<header> | Cabecera de la página o de una sección | <div id="header"> |
<nav> | Bloque de enlaces de navegación principal | <div id="nav"> |
<main> | Contenido principal del documento (único por página) | <div id="content"> |
<section> | Sección temática genérica con encabezado | <div class="section"> |
<article> | Contenido independiente y reutilizable (post, noticia) | <div class="post"> |
<aside> | Contenido tangencial (sidebar, notas) | <div id="sidebar"> |
<footer> | Pie de página o de sección | <div id="footer"> |
<figure> + <figcaption> | Contenido autocontenido con leyenda (imagen, gráfico, código) | — |
<details> + <summary> | Elemento desplegable nativo (disclosure widget) | JavaScript manual |
<mark> | Texto resaltado | <span class="highlight"> |
<time> | Fecha/hora con atributo datetime para máquinas | — |
Tip examen: Las etiquetas semánticas mejoran SEO (los buscadores entienden la estructura) y accesibilidad (los lectores de pantalla navegan por landmarks).
ETIQUETAS MULTIMEDIA HTML5
| Etiqueta | Función | Atributos clave |
|---|
<audio> | Reproducir audio nativo | controls, autoplay, loop, muted, preload |
<video> | Reproducir vídeo nativo | controls, autoplay, poster, width, height |
<source> | Múltiples formatos para audio/vídeo | src, type (MIME) |
<canvas> | Dibujo 2D/3D programático (API JavaScript) | width, height. Contexto: getContext('2d') o WebGL |
<svg> | Gráficos vectoriales escalables (XML inline) | Elementos: <circle>, <rect>, <path>, <text> |
FORMULARIOS HTML5
| Tipo input | Descripción | Validación nativa |
|---|
email | Campo email con validación de formato | Sí (patrón de email) |
url | URL válida | Sí |
tel | Teléfono (teclado numérico en móvil) | No (solo UX) |
number | Número con spinner | min, max, step |
range | Slider | min, max, step |
date, time, datetime-local | Selectores de fecha/hora nativos | Sí |
color | Selector de color | Sí |
search | Campo de búsqueda (UX: botón borrar) | No |
| Atributo de validación | Función |
|---|
required | Campo obligatorio |
pattern="regex" | Validación con expresión regular |
min / max | Valor mínimo/máximo |
minlength / maxlength | Longitud mínima/máxima |
placeholder | Texto de ayuda dentro del campo |
autofocus | Foco automático al cargar |
autocomplete | Sugerencias del navegador |
ATRIBUTOS HTML5 GLOBALES
| Atributo | Función |
|---|
data-* | Atributos personalizados. Accesibles vía element.dataset en JS |
contenteditable | Hace el elemento editable por el usuario |
draggable | Permite arrastrar el elemento (Drag and Drop API) |
hidden | Oculta el elemento (equivale a display: none) |
tabindex | Orden de tabulación (-1 = excluir, 0 = orden natural, n = orden explícito) |
role | Rol ARIA para accesibilidad |
aria-* | Atributos ARIA (accesibilidad) |
APIs HTML5
Fuente: WHATWG HTML Living Standard, W3C WebSocket API (w3.org/TR/websockets), W3C Web Workers (w3.org/TR/workers).
Flexbox — Ejes (trampa frecuente examen)
📌 TRAMPA EXAMEN (pregunta ds08_bas_021): align-content actúa sobre el eje transversal (cross axis), NO sobre el eje principal. El eje principal es responsabilidad de justify-content.
| Propiedad | Eje | Descripción |
|---|
| justify-content | Eje principal (main axis) | Dirección del flex-direction (por defecto: horizontal) |
| align-items | Eje transversal (cross axis) | Alineación de items en el eje perpendicular al principal |
| align-content | Eje transversal (cross axis) | Solo cuando hay múltiples líneas (flex-wrap activo) |
| API | Función | Detalle clave |
|---|
| Web Storage | Almacenamiento clave-valor en el navegador | localStorage (persistente) vs sessionStorage (sesión de pestaña). ~5-10 MB |
| IndexedDB | Base de datos NoSQL en el navegador | Almacenamiento estructurado, índices, transacciones. Sin límite práctico |
| Web Workers | Ejecución JavaScript en hilo separado | No acceden al DOM. Comunicación vía postMessage() |
| Service Workers | Proxy programable entre app y red | Base de PWAs. Caché offline, push notifications, background sync |
| WebSocket | Comunicación bidireccional full-duplex | Protocolo ws:// / wss://. Conexión persistente. Baja latencia |
| Geolocation | Obtener ubicación del usuario | navigator.geolocation.getCurrentPosition(). Requiere permiso |
| Canvas 2D / WebGL | Dibujo 2D y gráficos 3D | Canvas = bitmap. WebGL = OpenGL ES en el navegador |
| Drag and Drop | Arrastrar y soltar elementos | Eventos: dragstart, dragover, drop. dataTransfer object |
| History API | Manipular historial del navegador | pushState(), replaceState(), popstate event. Base de SPA routing |
| Notifications API | Notificaciones del sistema | Notification.requestPermission(). Push via Service Workers |
Pregunta recurrente: localStorage persiste entre sesiones. sessionStorage solo durante la pestaña. Web Workers NO pueden acceder al DOM.
DOM (Document Object Model)
| Concepto | Descripción |
|---|
| Qué es | API W3C que representa el documento HTML/XML como un árbol de nodos |
| Nodo raíz | document |
| Tipos de nodo | Element, Text, Attribute, Comment, Document, DocumentFragment |
| Selección | getElementById(), querySelector(), querySelectorAll(), getElementsByClassName() |
| Manipulación | createElement(), appendChild(), removeChild(), textContent, innerHTML |
| Eventos | addEventListener(). Fases: Capturing → Target → Bubbling |
| Event delegation | Un listener en el padre captura eventos de hijos (bubbling) |
CSS3
Fuente: W3C CSS Specifications (w3.org/Style/CSS). CSS3 se modularizó: cada módulo tiene su propia especificación y nivel.
DONDE SE APLICA CSS (Cascada)
| Método | Cómo | Prioridad |
|---|
| Inline | <p style="color:red"> | Más alta (1,0,0,0) |
| Internal | <style> en el <head> | Normal |
| External | <link rel="stylesheet" href="style.css"> | Normal (preferido) |
| !important | color: red !important; | Máxima (override todo) |
SELECTORES CSS
| Selector | Ejemplo | Especificidad |
|---|
| Universal | * | 0,0,0,0 |
| Tipo (elemento) | p, div, h1 | 0,0,0,1 |
| Clase | .clase | 0,0,1,0 |
| ID | #identificador | 0,1,0,0 |
| Atributo | [type="text"], [href^="https"] | 0,0,1,0 |
| Descendiente | div p (p dentro de div, cualquier nivel) | Suma |
| Hijo directo | div > p (p hijo directo de div) | Suma |
| Hermano adyacente | h2 + p (p inmediatamente después de h2) | Suma |
| Hermanos generales | h2 ~ p (todos los p después de h2) | Suma |
Especificidad (de mayor a menor): inline style > ID > clase/atributo/pseudoclase > tipo/pseudoelemento > universal. En caso de empate, gana el último declarado.
PSEUDOCLASES Y PSEUDOELEMENTOS
Pseudoclase (:) | Selecciona |
|---|
:hover | Elemento con el ratón encima |
:focus | Elemento con foco (teclado) |
:active | Elemento siendo pulsado |
:visited | Enlace ya visitado |
:first-child / :last-child | Primer/último hijo |
:nth-child(n) | Hijo en posición n (acepta fórmulas: 2n, odd, even) |
:not(selector) | Negación: todos excepto el selector |
:checked | Checkbox/radio marcado |
:disabled / :enabled | Estado del formulario |
:is() / :where() | Agrupación de selectores (CSS4). :is() tiene especificidad; :where() no |
Pseudoelemento (::) | Genera/selecciona |
|---|
::before | Contenido generado antes del elemento (requiere content) |
::after | Contenido generado después del elemento |
::first-line | Primera línea de texto |
::first-letter | Primera letra (drop caps) |
::placeholder | Texto placeholder de inputs |
::selection | Texto seleccionado por el usuario |
Tip examen: Pseudoclase = un solo dos puntos (:) — selecciona estado. Pseudoelemento = dos dos puntos (::) — genera o selecciona parte del elemento.
MODELO CAJA (Box Model)
| Capa (de dentro a fuera) | Propiedad | Descripción |
|---|
| Content | width / height | El contenido real (texto, imagen) |
| Padding | padding | Espacio interior (entre contenido y borde). Hereda background |
| Border | border | Borde visible del elemento |
| Margin | margin | Espacio exterior (entre este elemento y los demás). Transparente |
box-sizing | width/height incluye |
|---|
content-box (default) | Solo el content. Padding + border se suman |
border-box (recomendado) | Content + padding + border. Más intuitivo |
POSICIONAMIENTO (position)
| Valor | Flujo | Referencia | Uso |
|---|
static | Normal (default) | — | Comportamiento por defecto |
relative | Normal + desplazamiento | Su posición original | Ajuste fino, base para absolute |
absolute | Fuera del flujo | Ancestro posicionado más cercano (no static) | Popups, tooltips, overlays |
fixed | Fuera del flujo | Viewport | Headers/menús fijos al hacer scroll |
sticky | Normal hasta umbral, luego fijo | Contenedor + viewport | Headers que se pegan al hacer scroll |
DISPLAY: FLEX Y GRID
| Propiedad Flex | Valor/Función |
|---|
display: flex | Activa Flexbox en el contenedor |
flex-direction | row (default) | column | row-reverse | column-reverse |
justify-content | Alineación en eje principal: flex-start, center, space-between, space-around, space-evenly |
align-items | Alineación en eje transversal: stretch, center, flex-start, flex-end, baseline |
flex-wrap | nowrap (default) | wrap | wrap-reverse |
gap | Espacio entre items |
flex: grow shrink basis | Shorthand: flex: 1 0 auto |
| Propiedad Grid | Valor/Función |
|---|
display: grid | Activa Grid en el contenedor |
grid-template-columns | Define columnas: 1fr 2fr 1fr, repeat(3, 1fr), auto-fill |
grid-template-rows | Define filas |
grid-gap / gap | Espacio entre celdas |
grid-column / grid-row | Posicionar item: grid-column: 1 / 3 (ocupa 2 columnas) |
grid-template-areas | Nombrar áreas: "header header" "sidebar main" "footer footer" |
Flex = 1 dimensión (fila O columna). Grid = 2 dimensiones (filas Y columnas). No son excluyentes: se combinan (Grid para layout, Flex para componentes).
RESPONSIVE DESIGN Y MEDIA QUERIES
| Concepto | Descripción |
|---|
| Media Query | @media (max-width: 768px) { ... } |
| Viewport meta | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| Mobile First | Estilos base para móvil, @media (min-width) para pantallas más grandes |
| Container Queries | CSS4: @container (min-width: 400px) { ... }. Responsive al contenedor, no al viewport |
| Breakpoints comunes | Dispositivo |
|---|
max-width: 480px | Móviles |
max-width: 768px | Tablets (portrait) |
max-width: 1024px | Tablets (landscape) / laptops pequeños |
min-width: 1200px | Escritorio |
UNIDADES CSS
| Tipo | Unidad | Referencia |
|---|
| Absolutas | px | Píxel CSS (1/96 pulgada) |
cm, mm, in | Centímetros, milímetros, pulgadas |
pt | Puntos (1/72 pulgada). Usado en impresión |
| Relativas | em | Relativo al font-size del elemento padre |
rem | Relativo al font-size del <html> (root em) |
% | Relativo al contenedor padre |
vw / vh | 1% del ancho/alto del viewport |
fr | Fracción del espacio disponible (solo Grid) |
VARIABLES CSS (Custom Properties)
| Concepto | Sintaxis |
|---|
| Declarar | :root { --color-primary: #3498db; } |
| Usar | color: var(--color-primary); |
| Fallback | color: var(--color-primary, blue); |
| Scope | Heredan en cascada. Se pueden redefinir por selector |
CASCADA Y HERENCIA CSS
| Orden de la cascada (de menor a mayor prioridad) |
|---|
| 1. Estilos del navegador (user-agent stylesheet) |
| 2. Estilos del usuario |
| 3. Estilos del autor (CSS externo/interno) |
4. Estilos del autor con !important |
5. Estilos del usuario con !important |
| Propiedad heredada | Propiedad NO heredada |
|---|
color, font-family, font-size, line-height, text-align, visibility | margin, padding, border, width, height, background, display, position |
XML Y LENGUAJES DE INTERCAMBIO
Fuente: W3C XML 1.0 Specification (w3.org/TR/xml), XML Schema (w3.org/TR/xmlschema-1), RFC 8259 (JSON), yaml.org/spec.
XML FUNDAMENTOS
| Concepto | Descripción |
|---|
| Qué es | eXtensible Markup Language. Metalenguaje para definir lenguajes de marcas |
| W3C | Estándar W3C desde 1998. Versión actual: XML 1.0 (5th Edition) |
| Declaración | <?xml version="1.0" encoding="UTF-8"?> |
| Case sensitive | Sí — <Tag> ≠ <tag> |
| Entidades predefinidas | < (<), > (>), & (&), " ("), ' (') |
| CDATA | <![CDATA[ texto sin escapar ]]> — contenido literal |
| Namespace | xmlns:prefix="URI" — evita colisiones de nombres |
BIEN FORMADO vs VÁLIDO
| Concepto | Requisitos |
|---|
| Bien formado (well-formed) | Sigue las reglas sintácticas XML: un solo elemento raíz, etiquetas cerradas, anidación correcta, atributos entrecomillados |
| Válido (valid) | Bien formado Y cumple una gramática (DTD o XSD) |
Pregunta clave: Todo documento válido es bien formado, pero no todo bien formado es válido. "Válido" requiere conformidad con un DTD o XSD.
DTD vs XSD
| Aspecto | DTD | XSD (XML Schema) |
|---|
| Sintaxis | Propia (no XML) | XML |
| Tipos de datos | Muy limitados | Ricos: string, integer, date, boolean, decimal, etc. |
| Namespaces | No soporta | Sí |
| Herencia | No | Sí (extensión y restricción de tipos) |
| Expresividad | Baja (ELEMENT, ATTLIST) | Alta (simpleType, complexType, sequence, choice, minOccurs, maxOccurs) |
| Estándar | W3C (parte de XML) | W3C (XML Schema 1.0/1.1) |
| Indicador XSD | Función |
|---|
xs:sequence | Hijos en orden estricto |
xs:choice | Uno de los hijos (OR) |
xs:all | Todos los hijos, en cualquier orden |
minOccurs / maxOccurs | Cardinalidad. maxOccurs="unbounded" = sin límite |
xs:simpleType | Tipo simple (solo texto, sin hijos ni atributos) |
xs:complexType | Tipo complejo (puede tener hijos y/o atributos) |
APIs DE PROGRAMACIÓN XML
| API | Modelo | Memoria | Acceso | Cuándo usar |
|---|
| DOM | Árbol en memoria | Alto (carga todo) | Lectura + escritura, random | Documentos pequeños/medianos, manipulación |
| SAX | Eventos (callbacks) | Bajo (streaming) | Solo lectura, secuencial | Documentos grandes, solo lectura |
| StAX | Pull parsing (iterador) | Bajo (streaming) | Solo lectura, secuencial, controlado por app | Documentos grandes, control del parseo |
| JAXB | Binding (Java ↔ XML) | Medio | Marshalling / Unmarshalling | Mapeo automático clases Java ↔ XML |
XPath
| Expresión | Selecciona |
|---|
/ | Raíz del documento |
//libro | Todos los elementos libro en cualquier nivel |
/libreria/libro[1] | Primer libro hijo de libreria |
//libro[@idioma='es'] | Libros con atributo idioma="es" |
//libro/titulo/text() | Texto de los títulos |
.. | Nodo padre |
@atributo | Selecciona un atributo |
XSLT (Transformaciones)
| Concepto | Descripción |
|---|
| Qué es | Lenguaje de transformación XML → otro formato (HTML, XML, texto) |
| Motor | Procesador XSLT aplica plantillas (templates) al documento fuente |
| Elementos clave | xsl:template match="...", xsl:value-of select="...", xsl:for-each, xsl:if, xsl:choose |
| Uso actual | Legacy en la mayoría de contextos; sustituido por JSON + templates en el frontend |
JSON (JavaScript Object Notation)
Fuente: RFC 8259 (IETF), ECMA-404 (JSON Data Interchange Standard).
| Tipo JSON | Ejemplo |
|---|
| Objeto | { "clave": "valor" } |
| Array | [1, 2, 3] |
| String | "texto" (siempre comillas dobles) |
| Number | 42, 3.14, -1, 1.5e10 |
| Boolean | true, false |
| Null | null |
| JSON vs XML | JSON | XML |
|---|
| Formato | Ligero, clave-valor | Verboso, etiquetas |
| Tipos de datos | 6 tipos nativos | Todo es texto (tipos vía XSD) |
| Comentarios | No | Sí (<!-- -->) |
| Schema | JSON Schema (draft) | DTD / XSD (maduro) |
| Uso principal | APIs REST, configuración | SOAP, documentos, legacy |
YAML
| Característica | Descripción |
|---|
| Qué es | "YAML Ain't Markup Language". Formato de serialización basado en indentación |
| Superset de JSON | Todo JSON válido es YAML válido |
| Sintaxis | Clave-valor con :, listas con -, anidación por indentación (espacios, NO tabs) |
| Comentarios | Sí (#) |
| Multi-documento | Separador --- |
| Uso principal | Kubernetes, Docker Compose, GitHub Actions, Ansible, configuración |
FUENTES PÚBLICAS
Este resumen ha sido elaborado íntegramente a partir de fuentes de dominio público. No se ha utilizado material con copyright de terceros ni material de preparadores.
| Fuente | Tipo | Referencia |
|---|
| WHATWG HTML Living Standard | Estándar | html.spec.whatwg.org |
| W3C CSS Specifications | Estándar | w3.org/Style/CSS |
| W3C XML 1.0 Specification | Estándar | w3.org/TR/xml |
| W3C XML Schema | Estándar | w3.org/TR/xmlschema-1 |
| RFC 8259 — JSON | Estándar | IETF |
| YAML 1.2 Specification | Estándar | yaml.org/spec/1.2 |
| MDN Web Docs | Documentación comunitaria | developer.mozilla.org (CC BY-SA) |