📚 Guía Completa HTML 2025

Aprende HTML desde cero hasta nivel avanzado con ejemplos interactivos y proyectos prácticos

🚀 Introducción a HTML

¡Bienvenido! Esta es una guía completa e interactiva para aprender HTML desde cero hasta nivel avanzado.

¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje de marcado estándar para crear páginas web. No es un lenguaje de programación, sino un lenguaje de marcado que utiliza etiquetas para estructurar el contenido.

¿Por qué aprender HTML en 2025?

  • Es la base fundamental de toda página web
  • Necesario para cualquier carrera en desarrollo web
  • Complementa tecnologías modernas como React, Vue, etc.
  • Mejora la accesibilidad y SEO de las páginas web
  • Es el primer paso hacia una carrera en tecnología

Lo que aprenderás

Al finalizar esta guía podrás:

  • ✅ Crear páginas web completamente funcionales
  • ✅ Entender la estructura y semántica del HTML
  • ✅ Implementar formularios y multimedia
  • ✅ Aplicar principios de diseño responsive
  • ✅ Seguir las mejores prácticas del desarrollo web moderno
  • ✅ Crear un portafolio profesional

Tu Primera Meta

Antes de continuar, establece tu objetivo personal:

  • ¿Quieres crear tu propia página web?
  • ¿Estás buscando cambiar de carrera?
  • ¿Quieres mejorar tus habilidades actuales?

Escribe tu objetivo y tenlo presente durante todo el aprendizaje.

⚙️ Preparación del Entorno

Herramientas Necesarias

Editor de Código (Elige uno):

  1. Visual Studio Code (Recomendado - Gratuito)
  2. Sublime Text (Prueba gratuita)
  3. Atom (Gratuito)
  4. Notepad++ (Windows - Gratuito)

Navegadores para Pruebas:

  • 🌐 Google Chrome (Recomendado para desarrollo)
  • 🦊 Mozilla Firefox
  • 🔷 Microsoft Edge
  • 🍎 Safari (si tienes Mac)

Configuración Inicial

Pasos a seguir:
  1. Crea una carpeta llamada "MiPrimerSitioWeb" en tu escritorio
  2. Abre tu editor de código
  3. Instala la extensión "Live Server" en VS Code para ver cambios en tiempo real
  4. Configura tu espacio de trabajo

Ejercicio de Configuración

Vamos a verificar que todo esté funcionando:

  1. Abre VS Code
  2. Crea un archivo llamado "test.html"
  3. Escribe "!" y presiona Tab (debería crear una estructura HTML básica)
  4. Guarda el archivo y ábrelo con Live Server

Si ves una página en blanco en tu navegador, ¡estás listo para continuar!

📝 Fundamentos Básicos

¿Qué son las Etiquetas?

Las etiquetas HTML son elementos que definen la estructura y el contenido de una página web. Se escriben entre corchetes angulares < >.

Estructura de una etiqueta:

<etiqueta>contenido</etiqueta>

Etiquetas con atributos:

<etiqueta atributo="valor">contenido</etiqueta>

Etiquetas auto-cerradas:

<etiqueta />

Conceptos Clave

  • Elemento: La etiqueta completa con su contenido
  • Atributo: Información adicional sobre el elemento
  • Valor: Lo que se asigna al atributo
  • Anidación: Colocar elementos dentro de otros elementos

Ejemplo Práctico

<!-- Esto es un comentario -->
<p class="destacado" id="primer-parrafo">
    Este es un párrafo con <strong>texto en negrita</strong>
</p>

Primer Contacto con HTML

Crea un archivo llamado "mi-primera-pagina.html" y experimenta con diferentes etiquetas:

  • Usa <h1> para un título
  • Añade varios párrafos con <p>
  • Experimenta con <strong> y <em>
  • Añade comentarios con <!-- -->

🏗️ Estructura Básica de HTML

Todo documento HTML debe tener esta estructura básica:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Primera Página Web</title>
</head>
<body>
    <h1>¡Hola Mundo!</h1>
    <p>Esta es mi primera página web.</p>
</body>
</html>

Explicación de cada parte

  • <!DOCTYPE html>: Declara que es un documento HTML5
  • <html>: Elemento raíz que contiene todo el documento
  • <head>: Contiene metadatos (información sobre la página)
  • <meta charset="UTF-8">: Define la codificación de caracteres
  • <meta name="viewport">: Hace la página responsive
  • <title>: Título que aparece en la pestaña del navegador
  • <body>: Contiene todo el contenido visible de la página

Ejercicio Práctico 1

Crea tu primer archivo HTML:

  1. Abre tu editor de código
  2. Crea un nuevo archivo y guárdalo como "index.html"
  3. Copia la estructura básica anterior
  4. Cambia el título por tu nombre
  5. Añade un párrafo con una descripción tuya
  6. Abre el archivo en tu navegador

📄 Elementos de Texto

Encabezados

HTML tiene 6 niveles de encabezados, del más importante (h1) al menos importante (h6):

<h1>Encabezado Principal</h1>
<h2>Encabezado Secundario</h2>
<h3>Encabezado de Tercer Nivel</h3>
<h4>Encabezado de Cuarto Nivel</h4>
<h5>Encabezado de Quinto Nivel</h5>
<h6>Encabezado de Sexto Nivel</h6>

Párrafos y Formateo de Texto

<p>Este es un párrafo normal.</p>

<p>Este párrafo contiene <strong>texto en negrita</strong> 
   y <em>texto en cursiva</em>.</p>

<p>También puedes usar <b>negrita</b> y <i>cursiva</i>, 
   aunque strong y em son más semánticos.</p>

<p>Texto <u>subrayado</u> y texto <s>tachado</s>.</p>

<p>Para mostrar código usa <code>console.log("Hola");</code>.</p>

Diferencia entre <strong> vs <b> y <em> vs <i>

  • <strong> y <em> tienen significado semántico
  • <b> y <i> solo cambian la apariencia visual
  • Los lectores de pantalla entienden mejor strong y em
  • Es mejor práctica usar las etiquetas semánticas

Citas y Elementos Especiales

<blockquote>
    Esta es una cita larga que se destaca del texto principal.
    - Autor Famoso
</blockquote>

<p>La fórmula del agua es H<sub>2</sub>O</p>
<p>Einstein escribió E=mc<sup>2</sup></p>
<p>Presiona <kbd>Ctrl</kbd> + <kbd>C</kbd> para copiar</p>
<p><mark>Este texto está resaltado</mark></p>
<p><small>Texto en letra pequeña</small></p>

Ejercicio Práctico 2

Crea una página "sobre-mi.html" con:

  • Un encabezado principal con tu nombre
  • Varios párrafos sobre ti usando diferentes elementos de texto
  • Al menos 3 niveles de encabezados
  • Texto en negrita, cursiva y subrayado
  • Una cita inspiracional

📋 Listas

Listas No Ordenadas (Bullets)

<ul>
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
    <li>Tercer elemento</li>
</ul>

Listas Ordenadas (Numeradas)

<ol>
    <li>Paso uno</li>
    <li>Paso dos</li>
    <li>Paso tres</li>
</ol>

Listas de Definición

<dl>
    <dt>HTML</dt>
    <dd>Lenguaje de marcado para crear páginas web</dd>
    
    <dt>CSS</dt>
    <dd>Lenguaje para dar estilo a las páginas web</dd>
    
    <dt>JavaScript</dt>
    <dd>Lenguaje de programación para interactividad</dd>
</dl>

Listas Anidadas

<ul>
    <li>Frutas
        <ul>
            <li>Manzanas</li>
            <li>Naranjas</li>
            <li>Plátanos</li>
        </ul>
    </li>
    <li>Verduras
        <ul>
            <li>Zanahorias</li>
            <li>Brócoli</li>
            <li>Espinacas</li>
        </ul>
    </li>
</ul>

Ejercicio Práctico 4

Crea una página "habilidades.html" con:

  • Lista de tus habilidades técnicas
  • Lista ordenada de tus objetivos del año
  • Lista anidada de tus hobbies por categorías
  • Lista de definición con términos técnicos

📊 Tablas

Nota: Las tablas se usan solo para mostrar datos tabulares, no para diseño de página.

Tabla Básica

<table>
    <tr>
        <th>Nombre</th>
        <th>Edad</th>
        <th>Ciudad</th>
    </tr>
    <tr>
        <td>Juan</td>
        <td>25</td>
        <td>Madrid</td>
    </tr>
    <tr>
        <td>María</td>
        <td>30</td>
        <td>Barcelona</td>
    </tr>
</table>

Tabla Completa con Estructura Semántica

<table>
    <caption>Ventas del Primer Trimestre</caption>
    <thead>
        <tr>
            <th>Mes</th>
            <th>Ventas</th>
            <th>Meta</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Enero</td>
            <td>$50,000</td>
            <td>$45,000</td>
        </tr>
        <tr>
            <td>Febrero</td>
            <td>$60,000</td>
            <td>$55,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>$110,000</td>
            <td>$100,000</td>
        </tr>
    </tfoot>
</table>

Elementos de tabla

  • <table>: Contenedor principal
  • <caption>: Título de la tabla
  • <thead>: Encabezado de la tabla
  • <tbody>: Cuerpo de la tabla
  • <tfoot>: Pie de la tabla
  • <th>: Celda de encabezado
  • <td>: Celda de datos
  • <tr>: Fila de la tabla

📝 Formularios

Los formularios permiten a los usuarios enviar información:

Formulario Básico

<form action="#" method="POST">
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <input type="submit" value="Enviar">
</form>

Tipos de Input

<form>
    <!-- Texto -->
    <input type="text" placeholder="Nombre">
    
    <!-- Email -->
    <input type="email" placeholder="email@ejemplo.com">
    
    <!-- Contraseña -->
    <input type="password" placeholder="Contraseña">
    
    <!-- Número -->
    <input type="number" min="1" max="100">
    
    <!-- Fecha -->
    <input type="date">
    
    <!-- Color -->
    <input type="color">
    
    <!-- Archivo -->
    <input type="file" accept="image/*">
    
    <!-- Checkbox -->
    <input type="checkbox" id="acepto">
    <label for="acepto">Acepto términos</label>
    
    <!-- Radio buttons -->
    <input type="radio" id="si" name="respuesta" value="si">
    <label for="si">Sí</label>
    
    <!-- Área de texto -->
    <textarea placeholder="Tu mensaje..."></textarea>
    
    <!-- Select -->
    <select name="pais">
        <option value="">Selecciona un país</option>
        <option value="es">España</option>
        <option value="mx">México</option>
    </select>
</form>
Consejo: Siempre asocia las etiquetas <label> con sus inputs usando el atributo for que coincida con el id del input.

Ejercicio Práctico 5

Crea una página "contacto.html" con:

  • Un formulario completo de contacto
  • Diferentes tipos de campos
  • Validación básica con HTML5
  • Estructura semántica con fieldset y legend

🎯 Elementos Semánticos HTML5

HTML5 introdujo elementos semánticos que dan significado al contenido:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Sitio Web Semántico</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#inicio">Inicio</a></li>
                <li><a href="#sobre">Sobre Mí</a></li>
                <li><a href="#contacto">Contacto</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section id="inicio">
            <h1>Bienvenido</h1>
            <p>Contenido principal...</p>
        </section>
        
        <section id="sobre">
            <h2>Sobre Mí</h2>
            <article>
                <h3>Mi Historia</h3>
                <p>Mi historia personal...</p>
            </article>
        </section>
    </main>
    
    <aside>
        <h3>Información Adicional</h3>
        <p>Contenido complementario...</p>
    </aside>
    
    <footer>
        <p>© 2025 Mi Nombre</p>
        <address>
            <a href="mailto:mi@email.com">mi@email.com</a>
        </address>
    </footer>
</body>
</html>

Elementos Semánticos

  • <header>: Encabezado de página o sección
  • <nav>: Navegación principal
  • <main>: Contenido principal
  • <section>: Sección temática
  • <article>: Contenido independiente
  • <aside>: Contenido secundario
  • <footer>: Pie de página
  • <address>: Información de contacto

🎵 Multimedia

Audio

<!-- Audio básico -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Tu navegador no soporta audio.
</audio>

<!-- Audio con opciones -->
<audio controls autoplay loop muted>
    <source src="musica.mp3" type="audio/mpeg">
</audio>

Video

<!-- Video básico -->
<video controls width="640" height="360">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Tu navegador no soporta video.
</video>

<!-- Video con poster -->
<video controls poster="thumbnail.jpg">
    <source src="mi-video.mp4" type="video/mp4">
    <track kind="subtitles" src="subtitulos.vtt" 
           srclang="es" label="Español">
</video>

YouTube Embebido

<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/VIDEO_ID" 
        frameborder="0" 
        allowfullscreen>
</iframe>

🎨 CSS Básico Integrado

CSS Inline

<p style="color: red; font-size: 18px;">Texto rojo</p>

CSS Interno

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        
        h1 {
            color: navy;
            text-align: center;
        }
        
        .destacado {
            background-color: yellow;
            padding: 10px;
        }
        
        #especial {
            border: 2px solid red;
        }
    </style>
</head>

CSS Externo

<head>
    <link rel="stylesheet" href="estilos.css">
</head>

📱 Diseño Responsive

Meta Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Imágenes Responsive

<img src="imagen.jpg" alt="Descripción" 
     style="max-width: 100%; height: auto;">
Consejo: Siempre incluye el meta viewport y haz las imágenes responsive con CSS.

🎯 Proyectos Prácticos

Proyecto 1: Página Personal

Objetivo: Crear tu primera página web personal

Archivos a crear:

  • 📄 index.html
  • 📄 sobre-mi.html
  • 📄 contacto.html
  • 🎨 estilos.css

Proyecto 2: Blog Personal

Objetivo: Crear un blog con múltiples artículos

Características:

  • 📰 Página principal con lista de artículos
  • 📝 Páginas individuales para cada artículo
  • 🏷️ Sistema de categorías
  • 👤 Sidebar con información del autor

Proyecto 3: Portafolio Profesional

Objetivo: Crear un portafolio completo y profesional

Características:

  • 🎨 Diseño moderno y responsive
  • 🖼️ Galería de proyectos
  • 📞 Formulario de contacto
  • ⚡ Animaciones CSS
  • 🔍 Optimizado para SEO

✅ Buenas Prácticas

Estructura y Organización

✅ Correcto

<header>
    <nav>
        <ul>
            <li><a href="#inicio">Inicio</a></li>
        </ul>
    </nav>
</header>

❌ Incorrecto

<div class="header">
    <div class="nav">
        <div class="menu">
            <div><a href="#inicio">Inicio</a></div>
        </div>
    </div>
</div>

Accesibilidad

Reglas importantes:

  • 🖼️ Siempre usa alt en imágenes
  • 🏷️ Asocia labels con inputs
  • 📊 Usa encabezados jerárquicos (h1, h2, h3...)
  • 🎨 Mantén buen contraste de colores
  • ⌨️ Asegura navegación con teclado

SEO Básico

  • 📄 Títulos únicos y descriptivos
  • 📝 Meta descripciones informativas
  • 🏗️ Estructura de encabezados lógica
  • 🔗 URLs semánticas y limpias
  • ⚡ Páginas que cargan rápido

Performance

<!-- Optimiza imágenes -->
<img src="imagen.jpg" alt="Descripción" loading="lazy">

<!-- Usa formatos modernos -->
<picture>
    <source srcset="imagen.webp" type="image/webp">
    <img src="imagen.jpg" alt="Descripción">
</picture>

📚 Recursos Adicionales

🛠️ Herramientas Útiles

📖 Documentación

🎓 Cursos Recomendados

🌟 Próximos Pasos

Una vez domines HTML, aprende en este orden:

  1. 🎨 CSS Avanzado - Flexbox, Grid, Animations
  2. ⚡ JavaScript - Interactividad y lógica
  3. 🚀 Frameworks - React, Vue o Angular
  4. 🔧 Herramientas - Git, NPM, Build tools

✅ Checklist Final

Antes de considerar que dominas HTML, asegúrate de poder hacer esto:

  • ☐ Crear estructura básica HTML5
  • ☐ Usar elementos semánticos correctamente
  • ☐ Crear formularios funcionales
  • ☐ Implementar navegación entre páginas
  • ☐ Hacer sitios responsive
  • ☐ Seguir buenas prácticas de accesibilidad
  • ☐ Crear un proyecto completo desde cero

📞 Contacto

¿Tienes dudas, comentarios o sugerencias? ¡Escríbeme!