Editores y herramientas HTML
Compara los editores HTML más populares (VS Code, Sublime Text, Notepad++, WebStorm), crea tu primer archivo HTML y usa las DevTools del navegador y el validador W3C.
En el capítulo anterior aprendimos que HTML es un lenguaje de marcado utilizado para crear páginas web. Al crear páginas web, necesitarás las siguientes herramientas y programas:
- un editor de texto o HTML para escribir y editar el código fuente,
- un navegador para verificar los resultados,
- un validador: un programa especial que comprueba la validez o corrección sintáctica del código fuente.
Hablemos de cada uno con detalle.
Editores HTML
Hay varios editores profesionales que los desarrolladores web usan para programar. Sin embargo, no todos los editores pueden satisfacer todas tus necesidades. Por eso, un buen editor HTML debe contar con la siguiente funcionalidad:
- resaltado de sintaxis: mostrar el texto, especialmente el código fuente, con distintos colores y fuentes,
- soporte de vista en pestañas: mantener varias páginas web abiertas en pestañas al mismo tiempo,
- verificación de errores en un documento HTML,
- plegado de código: ocultar fragmentos grandes de código para mostrar solo un resumen o la primera línea.
Los editores HTML más populares son los que se listan a continuación:
- Visual Studio Code — gratuito y de código abierto, y la recomendación predeterminada más habitual. Funciona en Windows, macOS y Linux. Su fortaleza es su ecosistema de extensiones: añade Prettier para formatear el código automáticamente, Live Preview (o Live Server) para ver los cambios en el navegador al instante, e IntelliSense integrado para el autocompletado de etiquetas y atributos.
- Sublime Text — elige este por su velocidad pura. Se abre al instante y permanece ágil incluso con archivos muy grandes, lo que lo hace popular para ediciones rápidas. Es software de pago pero puede evaluarse de forma gratuita, y está disponible en las tres plataformas principales.
- Notepad++ — un editor gratuito y ligero que es exclusivo de Windows. En macOS o Linux, una opción ligera comparable es el editor integrado (TextEdit en macOS, gedit/nano en Linux), o simplemente usa VS Code multiplataforma.
- WebStorm — un IDE completo de JetBrains. Es software de pago (suscripción) y más pesado que los editores anteriores, pero incluye de forma nativa refactorización avanzada, depuración y soporte de frameworks, lo que lo hace adecuado para proyectos más grandes.
Si estás empezando y quieres cero configuración, puedes usar el Bloc de notas (Windows) o TextEdit (macOS) para escribir tu primer archivo. Sin embargo, estos editores básicos carecen de resaltado de sintaxis, por lo que recomendamos comenzar con un editor gratuito que lo soporte, como Visual Studio Code (cualquier plataforma) o Notepad++ (Windows). Una vez que tengas un editor, aprende la estructura básica de un documento HTML antes de continuar.
Tu primer archivo HTML
Los pasos a continuación usan el Bloc de notas de Windows porque está instalado en todos los equipos Windows y no requiere configuración. La misma idea aplica a cualquier editor: escribe el código, guárdalo con la extensión .html y luego ábrelo en un navegador.
Paso 1. Abre el Bloc de notas
Presiona la tecla Windows, escribe Notepad y presiona Enter. (En macOS, abre TextEdit y cambia al modo de texto sin formato en Formato → Convertir en texto sin formato.)
Paso 2. Escribe tu código
Escribe o copia el HTML que aparece a continuación.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Simple example</h1>
<p>Some text you want to show here</p>
</body>
</html>Al abrirse en un navegador, este código renderiza una página con el encabezado "Simple example" en texto grande y en negrita, seguido del párrafo "Some text you want to show here".
Paso 3. Guarda el documento HTML
Ve a File en el menú del Bloc de notas y elige Save As. Dale un nombre a tu documento usando la extensión .htm o .html. (Recomendamos usar la extensión .html.) Asegúrate de establecer la codificación en UTF-8 y de configurar el menú desplegable Save as type en All Files para evitar que Windows añada una extensión .txt. Guarda el archivo en una carpeta dedicada que crees de antemano para almacenar todos tus documentos HTML.
Paso 4. Verifica el archivo HTML en un navegador
Abre tu archivo HTML en un navegador (haz clic derecho en el archivo y elige Open with). Deberías ver el encabezado y el párrafo del código anterior.
Navegador
Necesitarás un navegador para comprobar los archivos HTML. Para empezar, cualquier navegador —Google Chrome, Opera o Firefox— será suficiente, pero más adelante necesitarás todos ellos. Ocurre que cada navegador tiene su propio motor de renderizado y tendrás que comprobar tu código en cada uno. Los navegadores modernos también incluyen Herramientas para desarrolladores integradas (presiona F12, o haz clic derecho en un elemento y elige Inspeccionar). Las DevTools te permiten inspeccionar el HTML y CSS en vivo de cualquier elemento, ajustar estilos y ver el resultado al instante, y leer la Consola, donde el navegador muestra errores y advertencias de JavaScript. Son la forma más rápida de averiguar por qué una página no se ve o se comporta como esperabas. Para las pruebas entre navegadores, puedes usar servicios en línea o máquinas virtuales una vez que tu proyecto crezca.
Validador
Una parte esencial del proceso de desarrollo de páginas web es verificar la validez del código HTML. Se pueden usar validadores especiales, programas o servicios para comprobar la validez o corrección sintáctica de un fragmento de código o documento.
El servicio en línea más común es validator.w3.org. Introduce la URL de una página web (o pega tu código directamente) y el servicio lo comprueba según el estándar HTML. El resultado es una lista de mensajes: los Errores (en rojo) señalan código que incumple el estándar, como una etiqueta no cerrada o un nombre de elemento mal escrito; las Advertencias (en amarillo) señalan cosas que están técnicamente permitidas pero que se desaconsejan. Si no hay problemas, recibes un mensaje verde que confirma que el documento es válido. Corregir los errores del validador es un buen hábito, ya que el marcado no válido puede renderizarse de forma inconsistente entre navegadores.
Para verificar la validez de archivos locales, puedes usar validadores en línea o los linters integrados en editores modernos como Visual Studio Code. Algunos editores también ofrecen comprobación de sintaxis en tiempo real mientras escribes.