Curso completo de HTML básico paso a paso (con ejemplos y código)

Curso completo de HTML básico paso a paso (con ejemplos y código)

🧩 Introducción

Si estás dando tus primeros pasos en el desarrollo web, HTML será tu mejor punto de partida. Este lenguaje, conocido como HyperText Markup Language, define la estructura y contenido de una página. Todo lo que ves en Internet —textos, imágenes, botones o formularios— empieza con HTML.

A diferencia de CSS o JavaScript, HTML no se usa para diseñar ni programar, sino para organizar la información. Piensa en él como los cimientos de una casa: sin HTML, el navegador no sabría cómo mostrar tu sitio.

 

🏗️ ¿Qué es HTML y cómo funciona?

HTML usa etiquetas que el navegador interpreta para mostrar contenido. Cada etiqueta se abre y se cierra, definiendo un bloque o elemento.

 

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi primera página</title>
</head>
<body>
  <h1>¡Hola mundo!</h1>
  <p>Este es mi primer documento HTML.</p>
</body>
</html>

 

Explicación:

  • <!DOCTYPE html> indica que usas HTML5.

  • <html> encierra todo el documento.

  • <head> contiene datos invisibles (como el título o metaetiquetas).

  • <body> es lo que el usuario ve en pantalla.

💡 Consejo: siempre define lang="es" para indicar que el contenido está en español. Mejora la accesibilidad y el SEO.

 

🧱 Estructura básica de un documento HTML

Toda página web parte de una estructura que puedes recordar fácilmente:

  1. Encabezado (head): contiene información interna de la página.

  2. Cuerpo (body): muestra el contenido visible.

  3. Etiquetas de organización: ayudan a dar jerarquía, como <header>, <main>, y <footer>.

Ejemplo moderno:

 

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Estructura básica HTML</title>
</head>
<body>
  <header>
    <h1>Bienvenido a mi sitio</h1>
  </header>

  <main>
    <p>Este es el contenido principal.</p>
  </main>

  <footer>
    <p>© 2025 Mi sitio web</p>
  </footer>
</body>
</html>

📌 Nota: la etiqueta <meta name="viewport"> hace que tu página sea adaptable a dispositivos móviles.

 

🔠 Etiquetas HTML más usadas

HTML tiene decenas de etiquetas, pero algunas son esenciales para comenzar:

Etiqueta Función
<h1> a <h6> Encabezados (títulos y subtítulos)
<p> Párrafo
<a> Enlace
<img> Imagen
<ul>, <ol>, <li> Listas
<div> División o contenedor
<span> Texto en línea

 

Ejemplo práctico:

 

<h1>Mi primer título</h1>
<p>Este es un párrafo dentro del cuerpo del documento.</p>
<a href="https://www.google.com" target="_blank">Visitar Google</a>

 

🧰 Buenas prácticas al escribir HTML

Un código limpio te evitará dolores de cabeza después:

  • Anida las etiquetas correctamente.

  • Usa comentarios <!-- así --> para documentar tu código.

  • Evita usar <font> o atributos obsoletos.

  • Valida tu HTML en validator.w3.org para detectar errores.

Ejemplo de comentarios:

 

<!-- Encabezado principal -->
<h1>Mi sitio web</h1>

<!-- Párrafo de introducción -->
<p>Bienvenido a mi primera página HTML.</p>

 

🚀 Tu primer proyecto HTML

Nada mejor que practicar. Crea una tarjeta personal con tu nombre, una descripción y un enlace.


 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Tarjeta personal</title>
</head>
<body>
  <h1>Erick “Chingón”</h1>
  <p>Desarrollador web en formación. Amante del código limpio.</p>
  <a href="https://github.com/">Visita mi GitHub</a>
</body>
</html>

 

Guárdalo como index.html y ábrelo en tu navegador.
¡Felicidades, ya creaste tu primera página web!

 

🏁 Conclusión

Aprender HTML es el primer paso para construir cualquier sitio web. Dominar su estructura te facilitará todo lo que venga después: CSS, JavaScript y frameworks modernos.
Si quieres seguir aprendiendo, revisa los siguientes posts de esta serie donde exploramos encabezados, párrafos, listas e imágenes con ejemplos reales.

Leer post anterior

Comentarios