Tu primer HTML en Visual Studio Code

Prepara una carpeta reconocible

Crea una carpeta para el proyecto y ábrela en VS Code. Dentro, crea un archivo llamado index.html. La extensión importa: si el sistema lo guarda como index.html.txt, el navegador puede tratarlo como texto. Activa la visualización de extensiones en el explorador si no estás seguro. Mantén los archivos de cada proyecto juntos para que las rutas de imágenes y estilos sean fáciles de comprender.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Mi primer proyecto</title>
</head>
<body>
  <h1>Una página desde VS Code</h1>
  <p>Este archivo vive en mi carpeta.</p>
</body>
</html>

Escribe el documento, guárdalo y abre ese archivo con el navegador. El encabezado y el párrafo deben aparecer en el área de contenido; el texto de title suele aparecer en la pestaña. Si ves otra versión, compara la ruta del archivo abierto con la carpeta que muestra VS Code. Es frecuente tener dos archivos con el mismo nombre en carpetas distintas.

Haz un cambio que puedas reconocer

Cambia solo el texto dentro de h1, guarda el archivo y recarga la página. Si aparece el nuevo texto, la conexión entre editor y navegador está clara. Añade después un h2 y una lista de tres cosas que quieras aprender. Mantén un orden lógico aunque aún no exista una hoja de estilos. El editor puede sugerir etiquetas de cierre, pero una sugerencia no garantiza que el contenido esté organizado de forma comprensible.

Para probar una ruta relativa, crea una carpeta images y coloca una imagen propia allí. Desde index.html, una ruta como images/ejemplo.jpg busca el archivo dentro de esa carpeta. Si la imagen no aparece, revisa el nombre exacto, la extensión y la posición de ambos archivos antes de cambiar el HTML. Añade una descripción alt que explique la información relevante de la imagen.

Diagnostica antes de volver a escribir

Si el navegador muestra las etiquetas como texto, verifica la extensión del archivo. Si no ves la última modificación, confirma que guardaste y recargaste la página correcta. Si falta una imagen, compara su ruta con el árbol de carpetas. Si los caracteres acentuados se ven mal, revisa la codificación del archivo y meta charset="utf-8". Cambia una causa posible cada vez para saber qué corrigió el fallo.

Cierra el navegador y abre otra vez el archivo desde la carpeta del proyecto. La página debe conservar el mismo contenido. Esta prueba demuestra que no dependes de una vista temporal del editor. En el siguiente paso puedes añadir styles.css y una segunda página enlazada desde la navegación, pero primero conviene dominar qué archivo está guardado, dónde se encuentra y cómo lo interpreta el navegador.