Herramientas para escribir HTML

Configura tu entorno: editor de código, CodePen y herramientas específicas para revisar y validar HTML.

📘 Teoría

VS Code (o editor de código)

El editor donde escribirás tus archivos .html.

Visual Studio Code es un editor gratuito muy usado para desarrollo web. Te permite abrir carpetas, tener varios archivos abiertos y ver una vista previa del HTML.

Para HTML es útil: resaltado de sintaxis, cierre automático de etiquetas, atajos para duplicar líneas y formatear el documento. Instala la extensión "HTML CSS Support" o "Live Server" si quieres ver los cambios al guardar.

Abre una carpeta y crea archivos con extensión .html.
Usa Ctrl+S (o Cmd+S) para guardar y recargar el navegador para ver cambios.
El formato UTF-8 y la indentación consistente facilitan leer y mantener el código.

Archivo mínimo para abrir en el editor

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Mi página</title>
</head>
<body>
  <h1>Hola</h1>
</body>
</html>

CodePen y entornos en línea

Escribir y ver el resultado sin instalar nada.

CodePen te permite escribir HTML (y opcionalmente CSS y JavaScript) en pestañas y ver el resultado en vivo. Es ideal para practicar fragmentos y compartir ejemplos.

En este curso muchos ejercicios se pueden hacer directamente en el navegador: copia el HTML del ejemplo, pégalo en el panel HTML de CodePen y modifica. No necesitas configurar servidor ni carpetas.

Panel HTML: escribe solo la parte que va dentro del , o el documento completo.
Vista previa: se actualiza al escribir; puedes usar "Full Page" para ver la página entera.
Enfócate en el panel HTML; CSS y JS los verás en cursos posteriores.

Validador HTML (W3C)

Comprueba que tu HTML sea válido.

El Validador del W3C (validator.w3.org) comprueba si tu documento cumple las reglas del estándar HTML. Puedes pegar el código, subir un archivo o indicar una URL.

Los avisos y errores te enseñan a cerrar etiquetas, usar atributos correctos y evitar estructura inválida. Corregir estos mensajes mejora la compatibilidad y la accesibilidad.

Pega el HTML en "Validate by Direct Input" y revisa errores y advertencias.
Prioriza primero los errores; las advertencias suelen ser recomendaciones.
Un documento válido es más predecible en todos los navegadores.

Herramientas de desarrollador (solo lo que toca a HTML)

Inspeccionar el HTML de cualquier página.

En Chrome, Firefox o Edge puedes abrir las herramientas de desarrollador (F12 o clic derecho → Inspeccionar). La pestaña "Elements" o "Inspector" muestra el árbol HTML real de la página.

Ahí puedes ver cómo está estructurado un sitio: qué etiquetas usan, qué atributos tienen y cómo se anidan. No hace falta usar aún la consola ni la pestaña de red; con inspeccionar el HTML es suficiente para este curso.

F12 o clic derecho → Inspeccionar abre las herramientas.
En Elements/Inspector verás el DOM (árbol HTML) de la página.
Usar "Ver código fuente" también te muestra el HTML tal como se sirve.

1 VS Code (o editor de código) 2 CodePen y entornos en línea 3 Validador HTML (W3C) 4 Herramientas de desarrollador (solo lo que toca a HTML)

🧭 Visuales clave

Atajos de Emmet para escribir HTML más rápido

Úsala como chuleta visual mientras practicas en el editor y aceleras la escritura de etiquetas repetitivas.

Infografía con atajos de Emmet para generar estructura HTML con abreviaturas

Abreviaturas comunes de Emmet

Sirve para reconocer patrones útiles de productividad antes de pasar a proyectos más largos.

Tabla de abreviaturas frecuentes de Emmet aplicadas a HTML

Can I Use como comprobación de soporte

Refuerza la idea de validar compatibilidad real antes de usar una característica HTML o CSS en producción.

Captura explicativa de Can I Use para verificar compatibilidad de características web

🧪 Aprende probando

Ejemplo Documento mínimo en el editor Copia este HTML en un archivo .html en VS Code y ábrelo en el navegador.

⌄

Ejemplo Fragmento para CodePen Pega este contenido en el panel HTML de CodePen (modo Full Page si quieres ver doctype completo).

⌄

🏁 Retos

Reto Reto: documento válido Completa el documento para que tenga doctype, idioma y codificación correctos.

⌄

Reto Reto: título descriptivo Añade un título que describa el contenido de la página.

⌄

🧰 Recursos

Enlaces útiles

VS Code - Documentación oficial CodePen - Ayuda Validador HTML del W3C MDN - Guía de herramientas de desarrollo

Test

Comprueba tus conocimientos con un test sobre HTML.

Test de HTML

Recursos del curso 27

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets

‹

Lección 01

Introducción al curso de HTML

Lección 03

Sintaxis HTML: cómo se escribe el lenguaje

›