HTML5 Mastery
Domina la estructura de la web moderna.
Temario del Curso
Contenido de la Lección
HTML (HyperText Markup Language) es el lenguaje estándar utilizado para crear y estructurar páginas web. Fue creado en 1989 por Tim Berners-Lee.
Su función principal es decirle al navegador qué es cada elemento de la página: qué texto es un título, qué es un párrafo, dónde hay una imagen o un enlace.
- No es un lenguaje de programación, es un lenguaje de "marcado".
- Se basa en etiquetas (tags) para estructurar el contenido.
Contenido de la Lección
A lo largo de los años, HTML ha evolucionado para adaptarse a las nuevas necesidades. Desde versiones muy básicas solo para texto, hasta llegar a HTML5.
HTML5 es la versión más reciente y el estándar actual. Sus principales mejoras incluyen:
- Introducción de etiquetas semánticas (como
<header>,<nav>) que dan significado a la estructura. - Soporte nativo para multimedia (video y audio) sin necesidad de plugins externos como el antiguo Flash.
- Manejo mejorado de formularios y validaciones.
Contenido de la Lección
El W3C (World Wide Web Consortium) es la organización internacional encargada de crear y mantener los estándares de la web, incluyendo HTML y CSS.
¿Por qué es importante seguir sus estándares?
- Garantiza que tu página web se vea y funcione igual en cualquier navegador (Chrome, Safari, Firefox).
- Asegura que la web sea accesible para personas con discapacidades.
- Permite que el código sea limpio y se mantenga funcional en el futuro.
Contenido de la Lección
Un Navegador (Edge, Chrome, Firefox) es el programa que descifra el código HTML y lo muestra de forma visual. El componente interno que hace esto se llama Motor de renderizado.
El proceso es el siguiente:
- El navegador lee el archivo `.html` línea por línea de arriba hacia abajo.
- Convierte las etiquetas en elementos visuales (títulos, imágenes, botones).
- Aplica los estilos CSS y la interactividad de JavaScript si existen.
Contenido de la Lección
La declaración <!DOCTYPE html> es obligatoria y debe ser la primera línea de código en cualquier documento HTML.
Su única función es decirle al navegador: "Este documento está escrito en la última versión de HTML (HTML5)".
Si no la incluyes, el navegador entrará en modo de compatibilidad (Quirks Mode) y tu diseño podría verse roto o comportarse de manera inesperada.
Contenido de la Lección
Las etiquetas son los bloques de construcción de HTML. La mayoría de los elementos constan de una etiqueta de apertura y una de cierre, que envuelven al contenido.
- Apertura: Se escribe entre signos de menor y mayor
<p>. - Cierre: Es idéntica pero incluye una barra diagonal
</p>.
Algunas etiquetas son vacías (o de cierre automático). Como no envuelven texto, solo se abren (ejemplo: <br> para salto de línea o <img> para imágenes).
Contenido de la Lección
El anidamiento es la práctica de colocar etiquetas HTML dentro de otras. Es esencial para crear estructuras jerárquicas.
Regla principal del anidamiento: La última etiqueta que abres debe ser la primera etiqueta que cierras.
No cruzar las etiquetas es vital para que el navegador no se confunda y el diseño no se rompa.
Contenido de la Lección
El DOM (Document Object Model) es la estructura de árbol que el navegador crea en su memoria cuando lee tu archivo HTML.
Imagina un árbol genealógico:
- La etiqueta
<html>es la raíz. - De ella nacen dos hijos principales:
<head>(información técnica) y<body>(contenido visual). - Dentro del
<body>nacen otros elementos como párrafos, títulos e imágenes.
Entender esta jerarquía es necesario para modificar la página dinámicamente usando JavaScript más adelante.
Contenido de la Lección
La sección <head> contiene información sobre la página que no es visible directamente en la ventana principal del navegador.
La etiqueta <title> es obligatoria en el head y cumple funciones clave:
- Define el texto que aparece en la pestaña del navegador.
- Es el título principal que se muestra en los resultados de búsqueda de Google.
- Debe ser descriptivo y conciso.
Contenido de la Lección
Para que el navegador sepa cómo interpretar correctamente caracteres especiales (como acentos, la letra ñ o emojis), debemos definir la codificación de caracteres.
Para esto usamos la etiqueta meta charset: <meta charset="UTF-8">.
- UTF-8 es el estándar universal actual.
- Siempre debe ir dentro de la sección
<head>y preferiblemente ser la primera etiqueta después de abrir el head.
Contenido de la Lección
El viewport es el área visible de la página web. En móviles, las pantallas son mucho más pequeñas, por lo que la página debe adaptarse.
La etiqueta <meta name="viewport" content="width=device-width, initial-scale=1.0"> es indispensable para que el diseño adaptable (Responsive Design) funcione.
width=device-width: Ajusta el ancho de la página al ancho del dispositivo.initial-scale=1.0: Establece el nivel de zoom inicial al 100%.
Contenido de la Lección
Para mantener el código ordenado, no escribimos los estilos visuales (CSS) dentro del HTML. Los vinculamos como archivos externos.
Para hacer esto, utilizamos la etiqueta <link> dentro de la sección <head>.
- rel="stylesheet": Le dice al navegador que el archivo vinculado es una hoja de estilos.
- href="archivo.css": Indica la ubicación del archivo a cargar.
Contenido de la Lección
HTML proporciona 6 niveles de encabezados para estructurar y jerarquizar los títulos, desde <h1> (más importante) hasta <h6> (menos importante).
Reglas de uso:
- Solo debe haber un
<h1>por página, ya que representa el tema principal. - Usa los encabezados en orden lógico (h1 seguido de h2, luego h3), sin saltar niveles.
- No uses los encabezados solo para hacer el texto más grande (para eso está CSS). Su función es puramente estructural y organizativa (SEO y accesibilidad).
Contenido de la Lección
La etiqueta <p> se utiliza para definir un párrafo de texto. Es un elemento "en bloque", lo que significa que siempre comienza en una línea nueva.
Por defecto, los navegadores añaden un pequeño margen (espacio) arriba y abajo de cada párrafo para separarlo visualmente de otros elementos.
Importante: El navegador ignora múltiples espacios en blanco o saltos de línea (Enter) creados presionando teclas en tu editor de código. Para crear un párrafo nuevo, siempre debes usar una nueva etiqueta <p>.
Contenido de la Lección
Para forzar un salto de línea dentro de un párrafo sin crear un bloque nuevo, utilizamos la etiqueta vacía <br> (Line Break).
Para crear una separación temática o visual (una línea horizontal gris en la pantalla) entre dos secciones de contenido, usamos la etiqueta <hr> (Horizontal Rule).
Ambas son etiquetas vacías y no requieren etiqueta de cierre.
Contenido de la Lección
HTML incluye etiquetas para aplicar formato básico al texto directamente, dándole semántica o estilo:
<u>(Underline): Texto subrayado clásico.<del>: Texto tachado (indica contenido eliminado u obsoleto).<sup>: Superíndice. Texto pequeño elevado (ej. en matemáticas X²).<sub>: Subíndice. Texto pequeño más bajo (ej. fórmulas químicas H₂O).
Contenido de la Lección
Las listas desordenadas agrupan elementos en los que el orden jerárquico no importa (por ejemplo, una lista de compras).
Se crean en dos pasos:
- Se envuelve toda la lista en la etiqueta padre
<ul>(Unordered List). - Cada elemento o ítem de la lista se incluye en una etiqueta hija
<li>(List Item).
El navegador les asigna visualmente viñetas o "bullets" (puntos redondos).
Contenido de la Lección
Las listas ordenadas agrupan elementos donde la secuencia cronológica o jerárquica sí importa (por ejemplo: pasos de una receta o un top/ranking).
Su uso es idéntico a la anterior, pero usando la etiqueta <ol> (Ordered List).
El navegador automáticamente enumera los ítems en orden secuencial (1, 2, 3...).
Contenido de la Lección
Las listas de definición se utilizan para agrupar términos junto con sus descripciones cruzadas (ideal para glosarios, diccionarios o pares de llave/valor).
Constan de tres etiquetas principales:
<dl>(Description List): Envuelve toda la lista.<dt>(Description Term): Define el término o nombre a explicar.<dd>(Description Details): Define la descripción profunda del término o nombre. Se dibuja con un margen a la izquierda (identación).
Contenido de la Lección
En las listas ordenadas (<ol>), puedes cambiar el modo de numeración mediante el atributo type:
type="1": Números decimales clásicos (1, 2, 3) - Ocurre por defecto.type="a" / "A": Letras del abecedario minúsculas o mayúsculas.type="i" / "I": Números romanos minúsculos o mayúsculos.
Ademas, el atributo start="x" permite que la lista comience la numeración en un número específico diferente del número 1.
Contenido de la Lección
La etiqueta <a> (Anchor) es la responsable de crear enlaces (hyperlinks) que conectan una página web con otra.
Para que funcione, necesita obligatoriamente el atributo href, el cual contiene la dirección de destino (URL) a la que será enviado el usuario al hacer clic.
El texto o la imagen que se encuentre encerrada entre <a> y </a> será lo que el usuario vea y pueda presionar en la pantalla (usualmente de color azul y subrayado).
Contenido de la Lección
El comportamiento predeterminado de un enlace es abrir la nueva página en la misma ventana, "reemplazando" tu sitio web.
Para forzar que un enlace abra en una nueva pestaña (ideal para enlaces a otras páginas ajenas), usamos el atributo target="_blank".
Seguridad: Cuando uses target="_blank", siempre debes añadir el atributo rel="noopener noreferrer" para proteger a tu usuario de posibles vulnerabilidades matemáticas de secuestro de pestañas (ataques maliciosos).
Contenido de la Lección
Los enlaces también pueden servir para desplazar velozmente al usuario a otra sección dentro de la misma página web (como una tabla de contenidos que salta directo al título deseado).
A esto lo llamamos Ancla.
- Le asignas un "id" (identificador único) al elemento de destino:
id="mitema". - En el enlace, escribes el "id" precedido por el símbolo de hashtag o numeral:
href="#mitema".
Contenido de la Lección
HTML cuenta con enlaces de acción directa que no redirigen a páginas, sino que abren aplicaciones del sistema operativo nativo del usuario (móvil o PC).
- mailto: Se utiliza para abrir el programa de correos por defecto (Outlook, Mail, Gmail), con el buzón de destinario ya lleno listo para escribir.
- tel: Especialmente útil en smartphones. Al hacer clic, abre la aplicación del teléfono lista para iniciar la llamada al número indicado.
Contenido de la Lección
Insertar imágenes es fundamental, pero elegir el formato correcto evita que tu web sea lenta:
- JPG / JPEG: Perfecto para fotografías a todo color de paisajes y personas. Comprimen muy bien reduciendo el peso, pero carecen de transparencia.
- PNG: Excelente para gráficos, logos e ilustraciones que requieren transparencia (tienen fondo sin color). No pierden calidad visual (resolución nítida).
- WebP: El estándar moderno impulsado por Google. Aglutina lo mejor de ambos: permite fondo transparente, excelente calidad y resulta un asombroso 30% más ligero en peso que los JPG y PNG. Es la elección actual predeterminada.
Contenido de la Lección
SVG (Scalables Vector Graphics) o "Vectores", son imágenes creadas directamente a través de código matemático geométrico, no píxel por píxel.
Ventaja máxima: Pueden crecer a un tamaño infinito y jamás se verán borrosas ni se pixelarán. Además, como son código puro, su peso es minúsculo (unos pocos kilobytes).
Uso ideal: Logotipos empresariales, pequeños iconos monocromáticos, tipografías e ilustraciones geométricas puras de UI.
Contenido de la Lección
Al insertar la etiqueta obligatoria <img>, requerimos siempre dos aliados: el `src` (ruta del archivo fotográfico) y el atributo alt (Alternative Text).
La presencia del alt es esencial para:
- Accesibilidad: Las personas ciegas o de escasa visión utilizan programas que les leen la web. El programa "les lee el texto alt" describiendo la imagen verbalmente.
- SEO en Google: Si deseas que tu imagen aparezca en "Google Imágenes", los robots la entenderán leyendo precisamente el atributo `alt`.
- Seguridad a fallos: Si por un error la imagen no logra cargar, el navegador mostrará al menos el texto referencial y descriptivo.
Contenido de la Lección
Es una gran práctica de desarrollo establecer el ancho (width) y el alto (height) originales de tu imagen directamente en la inserción HTML.
Al hacerlo evitamos una falla brusca de diseño llamada Cumulative Layout Shift (CLS): Cuando una página carga sin tamaños natales, el texto abarca inicialmente la pantalla y "salta molestamente" cuando de pronto se cargan finalmente las enormes fotos por debajo del texto en su peso total.
Dar su anchura y altura en el HTML, avisa al navegador instantáneamente del espacio exacto rectangular requerido para no reacomodar toda la experiencia visual posteriormente.
Contenido de la Lección
Para insertar una imagen fotográfica, conectar tu CSS y apuntar un link, precisas indicarle al atributo `src` o `href` la ruta (la dirección) donde el navegador hallará o encontrará a tu archivo.
Al iniciar un desarrollo, tus archivos se guardan normalmente en una carpeta principal de tu ordenador, con subcarpetas para cosas precisas (Ej: una carpeta css/ y otra imagenes/ o img/ ). Aprender a desplazarte y trazar el mapa correcto es imprescindible para evitar errores 404 (Archivo No Encontrado).
Contenido de la Lección
Las Rutas Relativas buscan un archivo indicando los pasos a dar "partiendo desde donde estás posicionado en el documento en este mismo instante".
- Mismo nivel:
imagen.jpg(Ocurre cuando el HTML y la imagen viven codo a codo en idéntica carpeta). - Bajando un nivel:
img/imagen.jpg(Entra a la carpeta "img" y agarra la imagen). - Saliendo subiendo un nivel superior:
../. Significa literal "Retrocede y sal de la carpeta estrecha que me contiene, dirígete afuera para atrás". Si necesitas saltar atrás dos carpetas, escribes../../.
Contenido de la Lección
Las Rutas Absolutas constan de la dirección técnica inmodificable y la ruta completa precisa y universal o "URL" en internet de esa pieza (Comienzan siempre con http:// o https://).
Se usan exclusivamente para conectar recursos exógenos o externos o fuera de tu servidor central natal de almacenamiento y posesión. (Ej. Mostrar un póster provisto de otra web de noticias o embeber un video ajeno oficial de Youtube).
Contenido de la Lección
Error crítico común: Nunca debes utilizar rutas absolutas locales apuntando a carpetas de tu propia computadora (ej: C:/Mis Documentos/foto.jpg). Al subir tu web a internet, los visitantes verán imágenes rotas porque sus navegadores intentarán buscar erróneamente en sus propios discos duros esa misma ruta, sin éxito.
Para recursos propios de tu servidor (tu CSS, tus imágenes internas), la mejor práctica y la única regla estricta es emplear rutas relativas o en base a la raíz de tu proyecto siempre garantizado su portabilidad.
Contenido de la Lección
HTML utiliza la etiqueta <table> para organizar datos de forma tabular. La estructura básica se basa en filas y celdas:
- <table>: Define el contenedor principal de la tabla.
- <tr> (Table Row): Define una fila horizontal.
- <td> (Table Data): Define una celda individual dentro de una fila para contener datos.
Contenido de la Lección
Para diferenciar los títulos de las columnas del resto de los datos, utilizamos la etiqueta <th> (Table Header) en lugar de <td>.
- Los navegadores suelen mostrar el contenido de
<th>en negrita y centrado por defecto. - Mejora la accesibilidad, permitiendo que los lectores de pantalla identifiquen qué datos pertenecen a cada columna.
Contenido de la Lección
En tablas de datos extensas, es fundamental organizar el contenido en secciones semánticas para mejorar el control de estilos y la accesibilidad:
- <thead>: Agrupa las filas que forman el encabezado (títulos).
- <tbody>: Contiene el cuerpo principal de datos de la tabla.
- <tfoot>: Se utiliza para el pie de tabla, ideal para mostrar totales o resúmenes finales.
Contenido de la Lección
Para crear tablas más complejas, podemos hacer que una celda ocupe más de un espacio utilizando dos atributos específicos:
- colspan: Define cuántas columnas debe ocupar una celda horizontalmente.
- rowspan: Define cuántas filas debe ocupar una celda verticalmente.
Esto es muy útil para fusionar celdas en encabezados o categorías generales.
Contenido de la Lección
HTML5 introdujo etiquetas semánticas para dar significado a la estructura del documento. La etiqueta <header> representa el contenido introductorio de una página o una sección.
Suele contener:
- El logotipo de la empresa o sitio.
- El nombre del sitio o título principal.
- El menú de navegación principal (
<nav>).
Contenido de la Lección
La etiqueta <footer> define el pie de página de un documento o sección. Es el lugar estándar para colocar información de cierre y enlaces secundarios.
Contenido habitual en un footer:
- Información de derechos de autor (Copyright).
- Enlaces a políticas de privacidad y términos legales.
- Información de contacto técnica o redes sociales.
Contenido de la Lección
Aunque solemos pensar en el <header> como algo exclusivo de la parte superior de la web, semánticamente puede haber varios en una misma página.
Puedes incluir un <header> dentro de cada etiqueta <article> o <section> para organizar el título y los metadatos de esa pieza específica de contenido, dándole una estructura mucho más limpia y profesional.
Contenido de la Lección
La etiqueta <address> se utiliza para proporcionar información de contacto del autor o propietario de un documento o artículo.
Cuando se coloca dentro de un <footer> de página, representa la información de contacto para todo el sitio. No debe usarse para direcciones postales genéricas a menos que sean el medio oficial de contacto.
Contenido de la Lección
La etiqueta <main> define el contenido principal del cuerpo de un documento. Este bloque debe contener el contenido que es único para esa página específica.
Reglas importantes:
- Solo debe haber un elemento
<main>visible por página. - No debe contener elementos que se repiten en todo el sitio, como menús de navegación, barras laterales o logotipos globales.
Contenido de la Lección
La etiqueta <section> se utiliza para agrupar contenido relacionado temáticamente dentro de un documento. Es una forma de dividir una página en bloques lógicos de información.
Ejemplos de uso:
- Sección de "Sobre nosotros".
- Sección de "Servicios" o "Precios".
- Capítulos de un documento extenso.
Contenido de la Lección
Para que una <section> sea considerada semánticamente correcta y accesible, debe estar identificada por un título (normalmente un <h2> a <h6>).
Si un bloque de contenido no tiene un título natural o un propósito temático claro, es probable que debas usar un <div> en lugar de una sección.
Contenido de la Lección
Es común confundir estas etiquetas, pero tienen propósitos muy distintos:
- <div>: Es un contenedor genérico sin significado semántico. Se usa exclusivamente para aplicar estilos CSS o para agrupar elementos por razones de diseño.
- <section>: Tiene significado semántico. Se usa para fragmentos de contenido que forman parte de un mismo tema y que se podrían listar en un índice de la página.
Contenido de la Lección
La etiqueta <article> representa una composición autónoma en un documento, página o sitio que se puede distribuir de forma independiente.
Puntos clave:
- Un "article" debe tener sentido por sí mismo incluso si se saca de la página (ej. un post de blog, un comentario o una tarjeta de producto).
- Cada
<article>suele llevar su propio encabezado.
Contenido de la Lección
La etiqueta <aside> representa una sección de la página cuyo contenido está indirectamente relacionado con el contenido principal.
Usos comunes:
- Barras laterales con enlaces a otros artículos.
- Publicidad o avisos secundarios.
- Glosarios o notas al pie dentro de un artículo.
Contenido de la Lección
En la estructura de un blog profesional, combinamos las etiquetas semánticas para que los buscadores como Google entiendan qué es lo más importante.
El contenido estelar va dentro de <article>, mientras que las nubes de etiquetas, widgets o banners secundarios se organizan perfectamente dentro de un <aside> para no distraer del valor central.
Contenido de la Lección
El mayor beneficio de usar etiquetas como <main>, <nav> o <article> es la accesibilidad.
Los lectores de pantalla permiten a las personas con discapacidad visual saltar directamente al contenido principal, ignorando menús repetitivos, lo que hace que la navegación sea mucho más fluida y eficiente.
Contenido de la Lección
La etiqueta <strong> se utiliza para indicar que un texto tiene una importancia seria o urgente. Visualmente se muestra en negrita, pero semánticamente le dice al navegador y a los lectores de pantalla que ese contenido es vital.
Por otro lado, la etiqueta <b> se usa para resaltar texto por razones estéticas sin añadir importancia semántica adicional.
Contenido de la Lección
La etiqueta <em> (Emphasis) se usa para dar énfasis a una palabra o frase, cambiando el significado según el tono. Los navegadores la muestran en cursiva.
La etiqueta <i> se reserva para términos técnicos, modismos de otros idiomas o pensamientos, donde se busca un cambio de estilo visual sin implicar un énfasis de importancia.
Contenido de la Lección
La etiqueta <mark> se utiliza para resaltar o marcar un texto debido a su relevancia en un contexto particular, como los resultados de una búsqueda.
Simula el efecto de un marcador fluorescente (usualmente amarillo) y ayuda al usuario a localizar rápidamente palabras clave dentro de un párrafo.
Contenido de la Lección
Cuando necesitamos mostrar fragmentos de código de programación dentro de un texto, usamos la etiqueta <code>. Esto aplica una fuente monoespaciada (tipo máquina de escribir).
Para indicar entradas de teclado que el usuario debe presionar, se utiliza la etiqueta <kbd> (Keyboard Input).
Contenido de la Lección
La etiqueta <blockquote> se utiliza para indicar que una sección de texto ha sido citada de otra fuente externa. Los navegadores suelen aplicarle un margen izquierdo para distinguirla visualmente.
Es ideal para testimonios largos, fragmentos de libros o declaraciones oficiales que queremos destacar del resto del párrafo.
Contenido de la Lección
Para citas breves que forman parte de una oración, usamos la etiqueta <q> (Quote). A diferencia de blockquote, esta etiqueta no crea un bloque nuevo.
La mayoría de los navegadores añaden automáticamente comillas al principio y al final del texto contenido en la etiqueta <q>.
Contenido de la Lección
La etiqueta <abbr> se usa para marcar abreviaturas o acrónimos. Al usar el atributo title, podemos proporcionar la descripción completa que aparecerá cuando el usuario pase el ratón por encima.
Es muy útil para mejorar la comprensión de términos técnicos o siglas institucionales.
Contenido de la Lección
Como vimos anteriormente, <address> agrupa la información de contacto de una persona u organización.
Aunque se puede usar dentro de un artículo para indicar el contacto del redactor, su uso más común es en el footer para mostrar la sede física, el correo electrónico o el enlace de contacto del sitio web.
Contenido de la Lección
En HTML, ciertos caracteres están reservados porque tienen un significado especial para el navegador. Por ejemplo, el símbolo < se usa para abrir etiquetas.
Para mostrar estos símbolos como texto normal, debemos usar entidades HTML:
<para el símbolo menor que (<).>para el símbolo mayor que (>).&para el ampersand (&).
Contenido de la Lección
Normalmente, el navegador colapsa múltiples espacios en blanco en uno solo. Si necesitas forzar espacios adicionales o evitar que dos palabras se separen en diferentes líneas, usamos la entidad (Non-Breaking Space).
Contenido de la Lección
Existen entidades sencillas para insertar símbolos comunes que a veces no están presentes en todos los teclados o que pueden dar problemas de codificación:
©para el símbolo de Copyright (©).®para Marca Registrada (®).€para el símbolo del Euro (€).
Contenido de la Lección
Gracias a la codificación UTF-8, hoy en día podemos usar emojis y caracteres especiales directamente en nuestro código HTML simplemente copiándolos y pegándolos.
Esto hace que las páginas sean más visuales y atractivas sin necesidad de cargar imágenes pesadas para iconos simples.
Contenido de la Lección
Los comentarios son notas que los desarrolladores dejan en el código para explicar partes del mismo. El navegador ignora completamente estas notas y no las muestra al usuario final.
Sintaxis: Se abre con <!-- y se cierra con -->.
Contenido de la Lección
No es necesario comentar cada línea de código si el HTML es claro por sí mismo. Los comentarios deben usarse para explicar el "por qué" de una decisión compleja, no el "qué".
Una buena práctica es comentar secciones grandes del documento para localizarlas rápidamente durante el desarrollo.
Contenido de la Lección
Los comentarios son una herramienta excelente para depurar (debug) errores. Puedes "comentar" un bloque de código sospechoso para desactivarlo temporalmente sin borrarlo y ver si el problema desaparece.
Contenido de la Lección
En proyectos grandes o colaborativos, los comentarios se usan para crear "separadores" o bloques de notas que facilitan la lectura del archivo a otros desarrolladores.
Se recomienda usar líneas de guiones o títulos claros para dividir el código en zonas lógicas (Header, Main, Footer, Modales).
Contenido de la Lección
El atributo id se utiliza para dar un nombre único a un elemento en toda la página. No puede haber dos elementos con el mismo ID en el mismo documento HTML.
Usos principales:
- Enlazar con CSS para estilos específicos.
- Manipular el elemento exacto mediante JavaScript.
- Crear anclas de navegación (links internos).
Contenido de la Lección
A diferencia del ID, el atributo class permite agrupar varios elementos bajo un mismo nombre. Es ideal para aplicar el mismo estilo visual a diferentes partes de la página.
Un mismo elemento puede tener varias clases separadas por espacios, lo que permite combinar diferentes reglas de diseño de forma modular.
Contenido de la Lección
El atributo lang indica al navegador y a los motores de búsqueda en qué idioma está escrito el contenido del elemento.
Aunque se define globalmente en la etiqueta <html>, puedes usarlo en etiquetas específicas si incluyes una palabra o frase en otro idioma, mejorando la pronunciación en lectores de pantalla.
Contenido de la Lección
Otros atributos globales útiles son:
- contenteditable: Permite que el usuario pueda editar el texto directamente desde el navegador.
- tabindex: Controla el orden en que los elementos reciben el foco al presionar la tecla Tab. Un valor de 0 los incluye en el flujo normal, mientras que un valor negativo los excluye.
Contenido de la Lección
La etiqueta <form> es el contenedor principal para recoger datos del usuario. Sus atributos más importantes son:
- action: La URL a donde se enviarán los datos.
- method: Cómo se enviarán los datos (generalmente GET o POST).
- name: Nombre identificador del formulario.
Contenido de la Lección
Existen dos formas principales de enviar la información de un formulario:
- GET: Los datos se envían visibles en la URL. Ideal para búsquedas o filtros donde el usuario puede querer compartir el enlace.
- POST: Los datos viajan "ocultos" en el cuerpo de la petición. Es obligatorio para contraseñas, archivos o información sensible y extensa.
Contenido de la Lección
Cuando un formulario es muy largo, es buena práctica agrupar campos relacionados visual y semánticamente:
- <fieldset>: Dibuja un recuadro alrededor de los campos agrupados.
- <legend>: Define el título o descripción de ese grupo de campos.
Contenido de la Lección
La etiqueta <label> se usa para dar un título a un input. Es CRUCIAL por dos razones:
- Accesibilidad: Los lectores de pantalla leen el label cuando el usuario entra en el input.
- Usabilidad: Al hacer clic en el texto del label, el cursor se posiciona automáticamente dentro del input. Se conectan mediante el atributo
for="id_del_input".
Contenido de la Lección
Los tipos de input más comunes son:
- type="text": Para cualquier texto corto (nombres, títulos).
- type="password": Oculta los caracteres con puntos o asteriscos para proteger la privacidad al escribir claves.
Contenido de la Lección
HTML5 introdujo inputs que validan automáticamente el formato:
- type="number": Solo permite números y ofrece flechas para subir/bajar el valor.
- type="date": Abre un calendario nativo del sistema operativo para seleccionar una fecha.
Contenido de la Lección
Para opciones de selección múltiple o única:
- Checkbox: El usuario puede marcar varias opciones de una lista.
- Radio: El usuario solo puede elegir UNA opción de un grupo (los elementos deben compartir el mismo atributo
name).
Contenido de la Lección
Finalmente, para procesar el formulario usamos botones especiales:
- type="submit": Envía toda la información a la URL definida en el action del form.
- type="reset": Borra todos los campos y los devuelve a su estado inicial.
Evaluación de Módulo
¿Listo para validar tus conocimientos?
Este examen consta de preguntas interactivas. Debes acertar todas para completar el tema.
Desafío de Proyecto
El resultado aparecerá aquí
Evaluación de Módulo
¿Listo para validar tus conocimientos?
Este examen consta de preguntas interactivas. Debes acertar todas para completar el tema.
Evaluación de Módulo
¿Listo para validar tus conocimientos?
Este examen consta de preguntas interactivas. Debes acertar todas para completar el tema.
Desafío de Proyecto
El resultado aparecerá aquí
Contenido de la Lección
HTML5 transformó la recolección de datos al introducir tipos de entrada que delegan la interfaz de usuario al sistema operativo. Esto no solo mejora la consistencia visual, sino que también garantiza la accesibilidad nativa.
- Tipo Color: Abre el selector de color del sistema portando perfiles ICC.
- Tipo Range: Ideal para interfaces de control de volumen o filtros de precio, permitiendo una interacción táctil superior.
- Tipo Date: Proporciona un calendario nativo, eliminando librerías JS pesadas.
Contenido de la Lección
La etiqueta <datalist> es la solución semántica para crear campos de búsqueda con sugerencias inteligentes sin restringir al usuario a una lista cerrada.
Desde una perspectiva de experiencia de usuario (UX), los datalists son fundamentales para:
- Reducir el error humano en entradas repetitivas.
- Mantener una interfaz limpia con una gran cantidad de opciones.
- Rendimiento: Al ser nativo, el filtrado es extremadamente eficiente.
Contenido de la Lección
Uso de <datalist> para ofrecer sugerencias de autocompletado en campos de texto.
Contenido de la Lección
Validación de formularios en el cliente:
required: Campo obligatorio.pattern: Validación por Expresión Regular.
Contenido de la Lección
Restricciones de longitud y valores:
min/max: Límites para números y fechas.maxlength: Máximo de caracteres permitidos.
Contenido de la Lección
Mejoras de foco y visualización:
autofocus: Foco automático al cargar.placeholder: Texto de ayuda inicial.
Contenido de la Lección
Agrupación semántica de opciones en menús desplegables mediante <optgroup>.
Contenido de la Lección
Uso del atributo multiple para permitir la selección de varios valores simultáneos.
Contenido de la Lección
Configuración del selector de archivos con el atributo accept para restringir extensiones.
Contenido de la Lección
Implementación de audio nativo con la etiqueta <audio> y barra de controles.
Contenido de la Lección
Los navegadores no soportan todos los formatos. Los más comunes son MP3 (universal), OGG (libre y comprimido) y WAV (sin pérdida, archivos grandes).
Contenido de la Lección
Para asegurar que el audio se escuche en cualquier navegador, usamos múltiples etiquetas <source>. El navegador reproducirá el primer formato que entienda.
Contenido de la Lección
La integración de video nativo en HTML5 no se trata solo de la etiqueta <video>, sino del control granular sobre el flujo de datos y la accesibilidad.
- Fuentes Múltiples: Es vital ofrecer formatos como WebM (eficiencia) y MP4 (compatibilidad).
- Accesibilidad (VTT): El uso de
<track>permite añadir subtítulos y descripciones de audio conforme a WCAG. - Preload: Aprenderás a optimizar la carga inicial usando etiquetas de metadatos.
Desafío de Proyecto
El resultado aparecerá aquí
Contenido de la Lección
Al igual que en audio, en video es vital ofrecer alternativas. MP4 es el estándar, mientras que WebM ofrece mejor compresión para web moderna.
Contenido de la Lección
La etiqueta <track> permite añadir subtítulos, descripciones o capítulos en formato .vtt para mejorar la accesibilidad.
Contenido de la Lección
srclang define el idioma del archivo de subtítulos (ej: "en", "es") y label es el nombre que verá el usuario en el menú de selección de subtítulos.
Contenido de la Lección
HTML5 permite incluir pistas especiales para personas invidentes que describen lo que sucede visualmente en el video usando kind="descriptions".
Contenido de la Lección
La etiqueta <iframe> se usa para insertar contenido de otros sitios, como mapas de Google o videos de YouTube, dentro de tu propia página.
Contenido de la Lección
El atributo sandbox añade una capa de seguridad a los iframes, bloqueando scripts maliciosos, pop-ups o accesos a formularios del sitio externo.
Contenido de la Lección
El atributo loading="lazy" pospone la carga de imágenes e iframes que no están visibles inicialmente. Esto ahorra ancho de banda y mejora la velocidad de carga (LCP).
Contenido de la Lección
Permite servir diferentes imágenes según el tamaño de pantalla o formato compatible (WebP vs JPG), optimizando el rendimiento móvil.
Contenido de la Lección
srcset define un conjunto de imágenes y sizes indica al navegador qué ancho ocupará la imagen en el diseño para que elija la resolución óptima.
Contenido de la Lección
Técnica para servir imágenes de alta densidad (Retina) usando descriptores de densidad (1x, 2x, 3x) en el atributo srcset.
Contenido de la Lección
Schema.org es un vocabulario estándar para estructurar datos. Ayuda a Google a entender si tu página es una receta, un evento o un producto.
Contenido de la Lección
itemscope define el bloque de datos y itemtype especifica la categoría del contenido según el estándar de Schema.org.
Contenido de la Lección
Uso de microdatos para indicar precios, disponibilidad y valoraciones, lo que genera "Rich Snippets" (estrellitas) en los resultados de búsqueda.
Contenido de la Lección
Etiquetado semántico para indicar el autor, fecha de publicación y cuerpo del texto, fundamental para SEO de blogs.
Contenido de la Lección
Etiquetas para marcar eventos (fecha, lugar, entradas) y personas (cargo, contacto, redes sociales).
Contenido de la Lección
El Rich Results Test de Google permite verificar que tus microdatos estén bien implementados y sean legibles para los buscadores.
Contenido de la Lección
HTML5 permite dibujar gráficos 2D y animaciones mediante JavaScript usando el elemento <canvas>.
Contenido de la Lección
Para dibujar en Canvas, primero obtenemos el contexto "2d" y luego usamos métodos como fillRect (rectángulos) o arc (círculos).
Contenido de la Lección
Podemos dibujar líneas (lineTo) y polígonos complejos iniciando un camino con beginPath y cerrándolo con stroke.
Contenido de la Lección
Uso de fillText y strokeText para escribir en el lienzo, permitiendo definir fuentes y alineaciones.
Contenido de la Lección
Canvas permite manipular píxeles de imágenes cargadas, aplicar filtros (escala de grises, brillo) o incluso invertir colores.
Contenido de la Lección
SVG es un formato de imagen vectorial basado en XML. A diferencia de Canvas, el contenido de un SVG es parte del DOM y es indexable por SEO.
Contenido de la Lección
Etiquetas para formas básicas dentro de SVG: rect, circle, ellipse, line, polyline y polygon.
Contenido de la Lección
La etiqueta path permite crear cualquier forma geométrica mediante comandos como M (Mover), L (Línea) o C (Curva Bezier).
Contenido de la Lección
SVG permite aplicar degradados (linearGradient) y filtros de desenfoque o sombras directamente desde el código HTML.
Contenido de la Lección
Canvas es mejor para miles de objetos y juegos; SVG es mejor para iconos, logotipos y elementos escalables interactivos con CSS.
Contenido de la Lección
La API de Geolocalización permite obtener las coordenadas reales (latitud/longitud) del usuario, previa autorización del navegador.
Contenido de la Lección
Para obtener la posición, el sitio debe usar HTTPS. Existen métodos para obtener la posición una vez o rastrearla en tiempo real (watchPosition).
Contenido de la Lección
Es vital manejar casos donde el usuario deniega el permiso o el GPS no está disponible para evitar fallos en la aplicación.
Contenido de la Lección
Web Storage (localStorage y sessionStorage) permite guardar datos en el navegador del usuario de forma persistente y segura (hasta 5MB).
Contenido de la Lección
localStorage se mantiene tras cerrar el navegador. sessionStorage se borra automáticamente al cerrar la pestaña.
Contenido de la Lección
Se eliminan claves individuales con removeItem o se limpia todo el almacenamiento del dominio con clear.
Contenido de la Lección
IndexedDB es una base de datos NoSQL transaccional en el navegador, ideal para grandes volúmenes de datos estructurados y modo offline.
Contenido de la Lección
Se basa en almacenes de objetos (Object Stores) e índices, permitiendo búsquedas rápidas por campos específicos.
Contenido de la Lección
LocalStorage es síncrono y limitado (texto); IndexedDB es asíncrono, robusto y permite guardar archivos y objetos complejos.
Contenido de la Lección
Permite arrastrar archivos o elementos HTML directamente a áreas específicas del sitio para subirlos o moverlos.
Contenido de la Lección
Cualquier elemento HTML puede ser arrastrable añadiendo el atributo draggable="true" y manejando el evento ondragstart.
Contenido de la Lección
El objeto dataTransfer permite pasar información (como IDs o texto) desde el origen del arrastre hasta el destino del soltado.
Contenido de la Lección
Web Workers permiten ejecutar tareas pesadas de JavaScript en segundo plano, sin bloquear la interfaz de usuario ni congelar la página.
Contenido de la Lección
La comunicación entre la página y el worker se realiza mediante el método postMessage y el evento onmessage.
Contenido de la Lección
Para detener un worker y liberar memoria, usamos terminate desde la página principal o close dentro del worker.
Contenido de la Lección
Web Sockets permiten comunicación bidireccional en tiempo real entre cliente y servidor, ideal para chats o notificaciones en vivo.
Contenido de la Lección
Manejo de eventos clave: onopen (conexión lista), onmessage (dato recibido) y onclose (desconexión).
Contenido de la Lección
A diferencia de HTTP (petición/respuesta), los WebSockets mantienen un túnel abierto, reduciendo el retardo y el consumo de datos.
Contenido de la Lección
SSE es una conexión unidireccional donde el servidor envía datos automáticamente al cliente, perfecto para feeds de noticias o stocks.
Contenido de la Lección
Fácil de implementar sobre HTTP estándar y reconexión automática automática si se pierde la conexión.
Contenido de la Lección
Módulo para mejorar la presentación de contenidos. Se agrupan bajo Module 23-26 según su tipo (Formularios Avanzados/Multimedia).
Contenido de la Lección
El atributo contenteditable permite al usuario editar el texto de cualquier elemento HTML directamente, como si fuera un procesador de textos.
Contenido de la Lección
LocalStorage permite guardar datos en el navegador del usuario de forma persistente entre sesiones del navegador.
Contenido de la Lección
Uso de hidden para ocultar elementos y el atributo tabindex para definir el orden de navegación con la tecla Tab.
Contenido de la Lección
HTML5 permite acceder a la cámara y micrófono del usuario mediante getUserMedia para aplicaciones de videochat.
Contenido de la Lección
Permite registrar qué acciones de teclado realiza el usuario para crear atajos (shortcuts) personalizados en la aplicación.
Contenido de la Lección
HTML5 puede leer la carga de la batería del dispositivo para optimizar el consumo de recursos de la web.
Contenido de la Lección
Permite a la web emitir una vibración física en teléfonos móviles (útil para errores o notificaciones).
Contenido de la Lección
Detección de la inclinación y aceleración del dispositivo para juegos o interfaces reactivas al movimiento físico.
Contenido de la Lección
Determinación del idioma preferido del usuario para mostrar la interfaz automáticamente en el lenguaje correcto.
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Los Custom Elements permiten crear etiquetas HTML propias (p.ej. <mi-usuario>) con lógica encapsulada.
Contenido de la Lección
Contenido de la Lección
attributeChangedCallback. Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
rel="noopener" (seguridad) o rel="sponsored" (anuncios para SEO). Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
<header>, <main> y <footer>. Contenido de la Lección
style="..." del HTML a archivos CSS externos para mejorar el mantenimiento. Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
Contenido de la Lección
sandbox para aislar y referrerpolicy para privacidad.