Aprender cómo escribir tu primer código HTML se vuelve sencillo cuando entiendes que solo necesitas indicarle al navegador qué quieres mostrar. Esta guía está pensada para quienes inician en desarrollo web y quieren crear su primer archivo .html desde cero, usando Visual Studio Code y referencias oficiales para ubicar etiquetas.

¿Dónde encuentro la lista oficial de etiquetas HTML?

La documentación de referencia es MDN Web Docs, disponible incluso en español. Ahí encuentras cada etiqueta explicada, desde la raíz html hasta elementos específicos del body.

No necesitas memorizar todas las etiquetas. Las irás usando conforme las requieras, y cuando dudes, Google se vuelve tu mejor aliado para resolver preguntas como qué etiqueta uso para escribir texto, donde aparecerá la etiqueta p para párrafos.

¿Qué es MDN Web Docs? Es la documentación oficial mantenida por Mozilla que describe cada etiqueta HTML, sus atributos y ejemplos de uso. Es la fuente más confiable para consultar sintaxis web [01:00].

¿Cómo creo mi primer archivo HTML en Visual Studio Code?

En Visual Studio Code haces clic en el ícono de nuevo archivo o usas clic derecho y New File. El nombre que usarás es index.html, donde la extensión .html es obligatoria para que la computadora reconozca el tipo de archivo [03:30].

Un detalle visual importante: cuando ves un círculo junto al nombre del archivo, significa que tienes cambios sin guardar. Al presionar Ctrl + S o Command + S en macOS, ese círculo desaparece y tus cambios quedan guardados.

Para abrirlo en el navegador, haz clic derecho sobre el archivo, selecciona Copy path, pega la ruta en la barra de direcciones y listo. En Windows verás algo como file:///C:/... y en macOS una ruta distinta, pero el resultado es el mismo.

¿Cuál es la estructura básica de un documento HTML?

Todo documento parte de la etiqueta html, que representa la raíz. Dentro viven dos secciones clave: head y body. El head guarda metainformación que el navegador usa pero el usuario no ve directamente, mientras que el body contiene todo lo visible.

Dentro del head puedes incluir:

• La etiqueta title, que define el texto mostrado en la pestaña del navegador.
• La etiqueta meta con el atributo charset="UTF-8", que permite usar acentos y caracteres especiales.
• Otras etiquetas como link o style para conectar recursos externos.

Si escribes un título con acentos sin declarar UTF-8, verás caracteres rotos como títuo en lugar de título. Eso ocurre porque el navegador solo reconoce caracteres en inglés por defecto [06:30].

¿Para qué sirve la etiqueta meta charset? Le indica al navegador qué codificación de caracteres usar. Con UTF-8 puedes escribir acentos, eñes y símbolos especiales sin que aparezcan errores visuales.

¿Qué diferencia hay entre header y div?

Ambos son contenedores, pero con propósitos distintos. La etiqueta header tiene significado semántico: le dice al navegador que ese bloque es un encabezado. En cambio, div es un contenedor genérico sin significado semántico, útil principalmente para agrupar elementos y aplicarles estilos con CSS [09:00].

Los divs se usan mucho porque CSS trabaja con técnicas de alineación que dependen de tener bloques bien encapsulados.

¿Cómo inserto una imagen con la etiqueta img?

La etiqueta img es autoconcluyente, igual que meta. No necesita etiqueta de cierre, basta con un espacio y una diagonal al final. Para indicarle qué imagen mostrar, usas el atributo src, abreviación de source.

La sintaxis de un atributo siempre es la misma: nombre del atributo, signo igual y valor entre comillas dobles. Por ejemplo:

html <img src="imagenes/logo.jpg" />

Para organizar tus recursos, puedes arrastrar una carpeta de imágenes desde tu explorador de archivos directamente al árbol de directorios de Visual Studio Code. El editor te preguntará si quieres añadirla al espacio de trabajo o crear una copia [11:30].

Cuando la carpeta imagenes está al mismo nivel que tu index.html, accedes a su contenido escribiendo el nombre de la carpeta y luego el archivo. Visual Studio Code autocompleta las rutas, lo que reduce errores de tipeo.

¿Qué es un atributo en HTML?

Un atributo es información adicional que le das a una etiqueta para modificar su comportamiento. En <meta charset="UTF-8">, charset es el atributo y UTF-8 es su valor. Esta misma estructura aplica para src, href y cualquier otro atributo que encuentres.

¿Por qué seguir buenas prácticas desde el inicio?

Visual Studio Code autocierra etiquetas automáticamente cuando las abres, lo que ayuda a mantener el código limpio. Además, al inspeccionar elementos en el navegador con clic derecho, puedes ver la estructura real de tu página y detectar si te falta alguna etiqueta base.

Escribir HTML correctamente desde el principio te prepara para integrar CSS y JavaScript después sin reescribir todo. La lógica es simple: le dices al navegador qué quieres mostrar, y él lo muestra.

¿Ya creaste tu primer index.html? Cuéntame en los comentarios qué etiqueta te resultó más interesante de descubrir.