Cómo aprender HTML desde cero: guía y recursos gratuitos

Para aprender HTML desde cero tienes tres vías fáciles: mirar tutoriales en YouTube, tomar un curso gratuito en línea y practicar en una plataforma como CodePen. Tal vez ya tienes una idea clara para tu sitio: un blog, una tienda en línea o un portafolio con secciones interactivas. Sabes exactamente cómo quieres que se vea y, como WordPress estaba detrás del 43.2% de los sitios web (en inglés) cuando se publicó la versión original de esta guía, decides empezar ahí.

Todo marcha bien hasta que chocas con los límites de las plantillas.

¿Y si pudieras:

• Ajustar el diseño hasta que quede exactamente como lo imaginas
• Actualizar y personalizar tu sitio al momento, sin depender de nadie
• Crear contenido atractivo que se distinga de la competencia
• Diagnosticar fallas y corregirlas rápido, con el ahorro de tiempo y dinero que eso implica
• Entenderte mejor con tu equipo técnico o tus colaboradores

Todo eso te lo da HTML, junto con las técnicas de diseño web adaptable que hacen que tu sitio se vea bien en cualquier pantalla.

Quizá no tienes tiempo para estudiar lenguajes complejos, ni presupuesto para contratar a un desarrollador web por cada tarea menor. La buena noticia: HTML es mucho más sencillo de lo que parece.

En esta guía verás qué ganas al aprender HTML, a quién le conviene esta habilidad (adelanto: a cualquiera) y cuáles son los mejores recursos gratuitos para empezar hoy mismo.

¿Qué es HTML?

El lenguaje de marcado de hipertexto (HTML, por sus siglas en inglés) es el lenguaje de marcado estándar con el que se construye todo sitio web: le indica al navegador cómo estructurar y mostrar el contenido, como textos, imágenes y enlaces. Lo creó Tim Berners-Lee y suele figurar entre los lenguajes más populares.

Como es la base de todo el contenido en línea, aprenderlo es una inversión que rinde en casi cualquier proyecto digital.

Hoy puedes diseñar un sitio web sin escribir código, es cierto. Pero saber HTML te permite personalizar una página desde cero y organizar cada elemento a tu manera: imágenes, texto, tablas y más.

¿Por qué vale la pena aprender HTML?

HTML es el ladrillo con el que está construida la web: todos los sitios usan HTML o algún derivado suyo. Dominarlo te da una ventaja enorme al trabajar con herramientas como Divi o el editor Gutenberg de WordPress, y también al armar plantillas de correo para tus campañas de marketing.

HTML usa marcas para dar estructura y significado a las palabras. Esa estructura semántica es clave para la accesibilidad: las tecnologías de asistencia se apoyan en ella para navegar e interpretar el contenido, de modo que las personas con discapacidad puedan usar tu sitio sin fricción.

Al SEO también le importa: los motores de búsqueda usan esa misma estructura semántica para rastrear e indexar tu sitio con facilidad, lo que ayuda a su visibilidad y posicionamiento en los resultados.

Y está el ángulo profesional. Cuando se escribió el artículo original de esta guía, la Oficina de Estadísticas Laborales de Estados Unidos (BLS) proyectaba que el empleo de los desarrolladores web crecería 16% entre 2022 y 2032 (en inglés), mucho más rápido que el promedio de todas las ocupaciones. Además, HTML no solo sirve para el desarrollo web: también suma en marketing digital, diseño UX/UI y gestión de contenidos.

Saber HTML te permite crear, modificar y reparar tu sitio sin llamar a un desarrollador por cada cambio o falla. Ahorras tiempo y dinero, y el control sobre la apariencia y el funcionamiento de tu sitio queda en tus manos.

También es la puerta de entrada a otros lenguajes esenciales, como hojas de estilo en cascada (CSS, por sus siglas en inglés) y JavaScript. Los tres trabajan en equipo para crear sitios dinámicos e interactivos.

Por último, un buen dominio de HTML te distingue en tu campo, sobre todo si programar no forma parte del perfil. Destacarás si fundaste una empresa, trabajas en marketing o tienes un puesto no técnico y puedes crear y editar contenido web por tu cuenta.

Primeros pasos con HTML

Ya conoces los beneficios; ahora, ¿por dónde empezar? La buena noticia es que no necesitas software sofisticado ni cursos costosos.

Basta una computadora con un navegador y un editor de texto sencillo, como Notepad o TextEdit, para escribir tu primera página.

Paso 1: entiende la estructura de un documento HTML

Un documento HTML es una serie de elementos, cada uno envuelto entre etiquetas de apertura y de cierre que le dicen al navegador qué tipo de contenido contiene.

• La etiqueta de apertura lleva el nombre del elemento entre corchetes angulares, así: <p>.
• El contenido va entre las etiquetas: puede ser un párrafo, un fragmento de texto o lo que corresponda.
• La etiqueta de cierre es casi igual, pero agrega una diagonal antes del nombre del elemento, así: </p>.

Así muestra párrafos en una página un elemento de bloque básico:

La regla de oro: toda etiqueta que abras debe cerrarse de la misma forma.

A medida que avances, lo importante es entender cómo los elementos, simples y complejos, se combinan para formar la estructura de una página.

Un documento HTML típico incluye:

• Una declaración <!DOCTYPE html> al inicio, que especifica la versión de HTML que usas
• Un elemento <html> que envuelve todo el documento
• Un elemento <head> para los metadatos, como el título de la página y los enlaces a las hojas de estilo
• Un elemento <body> con todo el contenido visible de la página

Este es un ejemplo sencillo de la estructura de un documento HTML:

Fíjate en dos cosas: cada elemento tiene su etiqueta de apertura y su cierre correspondiente, y los elementos se anidan unos dentro de otros para armar la estructura del documento.

Paso 2: domina los elementos básicos de estructura y contenido

Concéntrate en los elementos fundamentales que forman la mayoría de las páginas web. Con ellos estructuras tu contenido de forma lógica, fácil de entender tanto para las personas como para los motores de búsqueda.

Estos son los elementos básicos que conviene dominar primero:

• Encabezados (<h1> a <h6>): elementos de bloque esenciales que le dan una jerarquía clara a tu contenido.
• Párrafos (<p>): dividen el texto en bloques legibles, como los que estás leyendo en esta página.
• Listas (<ul> y <ol>): una lista desordenada (<ul>) crea viñetas, y una lista ordenada (<ol>) crea listas numeradas. Cada elemento de la lista va entre etiquetas <li></li>.
• Enlaces (<a>): el elemento ancla, uno de los elementos interactivos centrales, crea enlaces hacia otras páginas o sitios. Para agregarlos se usa el atributo href, así: href = "enlace".
• Tablas (<th> <tr><td>): con estos elementos armas tablas básicas: th es el encabezado de la tabla, tr una fila y td una celda de datos. Crea tantos como necesites y el navegador dibujará la tabla en pantalla por su cuenta.
• Imágenes (<img>): el elemento de imagen aporta interés visual y refuerza tu contenido. Incluye siempre un texto alternativo descriptivo, por accesibilidad.

Entre los atributos más comunes de las etiquetas HTML están class, id y src. Sirven para identificar elementos que pueden aparecer en varios lugares de una página.

Por ejemplo, si quieres señalar el párrafo que lleva el nombre del autor, podrías escribir algo así:

Después, al aplicar estilos, ese id te permite seleccionar ese único elemento y darle el formato que necesites.

Con estos elementos base y sus atributos, crearás páginas HTML bien estructuradas, semánticas y fáciles de leer y navegar.

¿Cómo aprender HTML gratis en línea?

Puedes aprender a programar mediante práctica guiada, ya sea en una clase presencial o en un curso en línea dividido en módulos.

Esos módulos suelen combinar videos, lecciones y ejercicios prácticos.

Como hay muchas maneras de aprender HTML, reunimos varios recursos gratuitos para que elijas la experiencia que mejor te acomode.

1. Mira tutoriales en YouTube

Si empiezas de cero, una de las rutas más simples son los tutoriales en video: guías paso a paso que cubren los conceptos básicos de HTML y te dan familiaridad con el lenguaje.

Para un panorama rápido, mira el tutorial de HTML para principiantes de Programming with Mosh (en inglés). En cerca de una hora explica los conceptos clave: etiquetas, atributos y cómo estructurar una página web.

Si quieres profundizar, el curso intensivo de HTML para principiantes absolutos de Traversy Media (en inglés) es una gran opción: recorre a fondo los elementos HTML y te enseña a crear el contenido de una página, como encabezados, párrafos y listas.

También puedes ver los tutoriales gratuitos de HTML de freeCodeCamp (en inglés).

La variedad de tutoriales gratuitos de HTML en YouTube facilita encontrar uno que se ajuste a tu estilo de aprendizaje y nivel, y que te ayude a desarrollar habilidades prácticas.

2. Toma cursos gratuitos de HTML en línea

Los tutoriales sirven para arrancar; los cursos en línea van más lejos: ofrecen lecciones estructuradas, ejercicios prácticos y seguimiento de tu progreso.

Estos son algunos recursos gratuitos excelentes para estudiar HTML:

Codecademy

Codecademy ofrece varios programas gratuitos para desarrollar habilidades técnicas. Más de 50 millones de estudiantes han usado Codecademy para aprender HTML básico y programación (en inglés). Y aunque el curso se presente como “básico”, te deja en condiciones de empezar a construir sitios con HTML.

El programa se apoya en tres ideas: aprender haciendo, recibir retroalimentación al instante y llevar lo aprendido a la práctica. Codecademy también tiene foros, chats, capítulos locales y eventos por si necesitas ayuda extra durante el proceso.

Learn-HTML.org

Learn-HTML.org (en inglés) es un buen punto de partida para todo lo relacionado con HTML. Incluye un curso en línea gratuito que te guía mientras escribes código, con tutoriales para principiantes que enseñan a crear sitios con HTML y CSS desde cero.

Las lecciones parten de los fundamentos y suben de complejidad poco a poco: elementos esenciales, enlaces, imágenes, botones, barras de navegación, formularios, video, diseño web adaptable, caché de aplicación, almacenamiento local, arrastrar y soltar, y más.

General Assembly Dash

General Assembly Dash (en inglés) es otro sitio reconocido para aprender los fundamentos de HTML. Este curso gratuito enseña a través de proyectos, y funciona bien tanto si empiezas desde cero como si ya tienes nivel intermedio y buscas un repaso.

En el mismo curso también verás HTML5, CSS3 y JavaScript, con lo que podrás crear sitios con distintos diseños e interacciones. Y si quieres seguir estudiando después del curso introductorio, General Assembly ofrece formación más avanzada.

3. Practica, practica y practica

Como con cualquier habilidad nueva, la práctica constante es la mejor manera de afianzar HTML. Cuando termines algunos tutoriales introductorios y te sientas a gusto con lo básico, ponte el reto de construir sitios simples desde cero.

Plataformas como CodePen (en inglés) te dan un entorno de trabajo básico para experimentar con código HTML, CSS y JavaScript.

CodePen además trae herramientas integradas para dar formato a tu código y detectar errores con solo hacer clic en Analyze HTML:

En su editor en línea escribes HTML, CSS y JavaScript, y el resultado aparece al momento en el panel de vista previa.

Aquí van algunas ideas para practicar con elementos dinámicos y multimedia:

1. Crea una página de perfil personal: arma una página “Sobre mí” con encabezados, párrafos, listas e imágenes, y agrega enlaces a tus redes sociales u otros sitios relevantes.
2. Estructura una entrada de blog: toma un texto de ejemplo y márcalo con los elementos HTML adecuados: encabezados, párrafos, listas y citas en bloque. Suma enlaces a contenido relacionado o fuentes externas.
3. Construye un menú de navegación: crea un menú con una lista desordenada y elementos ancla, y experimenta anidando listas para lograr menús desplegables.

Cuando domines los elementos por separado, pasa a proyectos pequeños que combinen varios y te obliguen a pensar en la estructura completa de la página. Por ejemplo:

• Una página de recetas con ingredientes, instrucciones y una foto del platillo terminado.
• Una página de producto para una tienda en línea, con imágenes, descripciones y un botón de “Comprar ahora”.
• Una página de portafolio que muestre tus proyectos, habilidades e información de contacto.

Para una experiencia más realista, puedes configurar un entorno de desarrollo local (en inglés) en tu computadora. Eso implica instalar un servidor web (como Apache o Nginx), una base de datos (como MySQL) y un lenguaje del lado del servidor (como PHP), un conjunto conocido como “stack”.

Con tu entorno local listo, puedes construir sitios desde cero o modificar código existente. Ese trabajo directo es el que convierte la teoría de HTML en experiencia real.

En esta etapa el objetivo es estructurar y presentar bien el contenido, sin preocuparte todavía por el diseño visual ni las funciones avanzadas. Concéntrate en escribir HTML limpio y semántico, y en organizar tu código con lógica.

Relacionado: ¿Quieres aprender WordPress? Empieza aquí

¿Qué trabajos puedes conseguir si sabes HTML?

Saber HTML también abre la puerta a empleos mejor pagados. Con un conocimiento profundo, o incluso básico, puedes aspirar a puestos como:

• Gerente de marketing por correo electrónico: con HTML puedes crear plantillas de correo atractivas y ajustarlas a los requisitos de tu empresa.
• Gerente de redes sociales: te resulta fácil corregir las tarjetas para redes, las metaetiquetas y otras etiquetas que a veces se descomponen tras una actualización.
• Desarrollador frontend: el HTML básico por sí solo no te consigue este puesto, pero sí te da una base excelente para aprender los demás lenguajes que se piden.
• Desarrollador backend: el desarrollo backend no exige HTML, pero saberlo te sirve para probar un cambio pequeño por tu cuenta y desplegarlo tú mismo.

Otras razones para aprender HTML

Si necesitas más motivos, aquí van tres:

1. Personalizar tu sitio: con HTML puedes ajustar el diseño, las fuentes, los colores y más hasta que coincidan con tu visión. Se acabó conformarse con plantillas genéricas.
2. Resolver fallas rápido: cuando algo se rompe en tu sitio, entender HTML facilita mucho el diagnóstico y la corrección, con el ahorro correspondiente.
3. Aprender otros lenguajes web: HTML es el punto de partida perfecto para lenguajes esenciales como CSS y JavaScript, que juntos sostienen los sitios web dinámicos.

Después de aprender HTML puedes sumar algunos proyectos a tu portafolio y empezar a buscar trabajo freelance en una plataforma como Toptal (en inglés).

Eso sí: aprender HTML, como toda habilidad nueva, pide tiempo y paciencia. Puedes lograr una comprensión básica en unos días, pero volverte experto toma bastante más, porque HTML es apenas una pieza del desarrollo web.

Preguntas frecuentes sobre aprender HTML

¿Cuánto tiempo se necesita para aprender HTML?

Puedes adquirir una comprensión básica de HTML en unos pocos días de práctica. Convertirte en experto lleva mucho más tiempo, porque HTML es solo una parte del desarrollo web y suele estudiarse junto con CSS y JavaScript.

¿HTML es un lenguaje de programación?

HTML es un lenguaje de marcado: describe la estructura y el significado del contenido para que el navegador sepa cómo mostrarlo. Aun así, suele figurar entre los lenguajes más populares de la web y es la base sobre la que después se aprenden CSS y JavaScript.

¿Qué necesito para empezar a escribir HTML?

Solo una computadora con un navegador y un editor de texto sencillo, como Notepad o TextEdit. No hace falta software especializado ni de pago para escribir y abrir tu primera página HTML.

¿Se puede aprender HTML gratis?

Sí. Hay tutoriales gratuitos en YouTube (Programming with Mosh, Traversy Media, freeCodeCamp), cursos sin costo en Codecademy, Learn-HTML.org y General Assembly Dash, y plataformas de práctica como CodePen donde escribes código y ves el resultado al instante.

¿Necesito saber HTML si uso WordPress?

No es obligatorio: puedes construir un sitio en WordPress sin escribir código. Pero saber HTML te da ventaja con editores como Gutenberg o Divi, te permite ajustar los detalles que las plantillas no resuelven y te ayuda a diagnosticar fallas sin esperar a un desarrollador.

Empieza a practicar HTML hoy

Cualquiera puede construir un sitio web sin experiencia en programación. Aun así, aprender HTML vale la pena: te permite personalizar cada elemento de tu sitio y puede abrirte más de una puerta laboral.

Para cerrar, estas son las tres rutas fáciles para empezar:

• Mira un tutorial en YouTube de creadores como Programming with Mosh (en inglés).
• Toma un curso de HTML en Codecademy o Learn-HTML.org (en inglés).
• Practica en una plataforma como CodePen (en inglés).

Y cuando quieras publicar lo que construyas, que un mal hosting no te frene. Con el Web Hosting de DreamHost tienes una plataforma rápida y segura para poner a prueba tus nuevas habilidades con HTML: almacenamiento NVMe SSD, certificados SSL gratuitos, respaldos diarios automáticos y garantía de reembolso de 30 días.