1. ¿Qué es HTML?

Principiante

HTML significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto). Es el lenguaje que utilizamos para crear las estructuras de las páginas web.

💡 Piénsalo así:

Si una página web fuera un edificio, HTML sería la estructura de ladrillo y cemento. Establece dónde irán las paredes, puertas y ventanas.

¿Por qué es importante?

  • Es la base de todas las páginas web
  • Organiza el contenido de forma estructurada
  • Es muy fácil de aprender
  • Funciona en todos los navegadores

2. Estructura Básica de un Documento HTML

Principiante

Todo documento HTML tiene la misma estructura. Es como un molde que tienes que seguir:

<!DOCTYPE html>
<html lang="es">
<head>
    <title>Mi Primera Página</title>
</head>
<body>
    <h1>¡Hola Mundo!</h1>
</body>
</html>

Desglosemos cada parte:

1
<!DOCTYPE html> - Le dice al navegador que este es un documento HTML5
2
<html> - Es la etiqueta raíz que contiene todo el documento
3
<head> - Aquí van información importante que no se ve en la página (título, estilos, etc.)
4
<body> - Aquí va TODO lo que verá el usuario en la página

3. Etiquetas HTML Básicas

Principiante

Las etiquetas son el corazón de HTML. Son instrucciones que le decimos al navegador.

📌 Regla de Oro:

Casi todas las etiquetas vienen en parejas: una de apertura <etiqueta> y una de cierre </etiqueta>

Etiquetas Esenciales:

<h1> a <h6>

Títulos (h1 es el más grande, h6 el más pequeño)

<h1>Título Principal</h1>
<p>

Párrafo de texto

<p>Este es un párrafo</p>
<strong>

Texto en negrita (importante)

<strong>Texto importante</strong>
<em>

Texto en cursiva (énfasis)

<em>Texto enfatizado</em>
<ul> y <li>

Listas sin orden

<ul><li>Elemento</li></ul>
<a>

Enlaces (hipervínculos)

<a href="url">Enlace</a>
<img>

Imágenes

<img src="foto.jpg">
<button>

Botones interactivos

<button>Haz clic</button>

4. Atributos: Dale Características a las Etiquetas

Principiante

Los atributos son información adicional que le damos a las etiquetas. Van dentro de la etiqueta de apertura.

<a href="https://ejemplo.com">Visita mi sitio</a>
<img src="foto.jpg" alt="Mi fotografía">
<button class="boton-grande">Presiona</button>

Atributos Comunes:

Atributo Se usa en ¿Qué hace?
href <a> Define la URL donde irá el enlace
src <img> Define la ruta de la imagen
alt <img> Texto descriptivo si la imagen no carga
class Cualquier etiqueta Para aplicar estilos CSS
id Cualquier etiqueta Identificador único del elemento

5. Formularios: Recopila Información

Intermedio

Los formularios permiten que los usuarios te envíen información.

<form>
    <label>Nombre:</label>
    <input type="text" placeholder="Tu nombre">
    
    <label>Email:</label>
    <input type="email" placeholder="Tu correo">
    
    <label>Mensaje:</label>
    <textarea></textarea>
    
    <button type="submit">Enviar</button>
</form>

🎯 Elementos principales:

  • <form> - Contenedor del formulario
  • <label> - Etiqueta de texto para cada campo
  • <input> - Campo de entrada (texto, email, contraseña, etc.)
  • <textarea> - Campo para texto largo
  • <button type="submit"> - Botón para enviar

6. HTML Semántico: Estructura Inteligente

Intermedio

El HTML semántico usa etiquetas que describen el significado del contenido, no solo su apariencia.

<header>
    <h1>Mi Sitio Web</h1>
</header>

<nav>
    <a href="/#inicio">Inicio</a>
    <a href="/#about">Acerca de</a>
</nav>

<main>
    <article>
        <h2>Mi primer artículo</h2>
        <p>Contenido aquí...</p>
    </article>
</main>

<footer>
    <p>© 2024 Mi Sitio Web</p>
</footer>

Etiquetas Semánticas Importantes:

<header>

Encabezado de la página o sección

<nav>

Navegación principal

<main>

Contenido principal de la página

<article>

Contenido independiente (como un artículo)

<section>

Una sección temática

<footer>

Pie de página

✨ Ventajas:

  • Mejor para SEO (buscadores entienden mejor tu página)
  • Más accesible para personas con discapacidades
  • Código más limpio y fácil de entender

7. Metodología BEM: Organiza tu CSS

Intermedio

BEM significa Block Element Modifier. Es una forma de nombrar tus clases CSS para que tu código sea más ordenado, reutilizable y fácil de mantener.

🎯 Las 3 Partes de BEM:

  • Block - Un componente independiente (ej: "botón", "tarjeta")
  • Element - Una parte del bloque (ej: "botón__texto", "tarjeta__imagen")
  • Modifier - Una variación del bloque (ej: "botón--grande", "tarjeta--destacada")

Estructura de Nombres BEM:

/* BLOCK */
.button { }

/* ELEMENT (usa doble guion bajo __) */
.button__text { }
.button__icon { }

/* MODIFIER (usa doble guion --) */
.button--large { }
.button--primary { }
.button--disabled { }

Ejemplo Completo de BEM:

/* ===== BLOQUE: TARJETA ===== */
.card {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ELEMENTOS de la tarjeta */
.card__header {
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

.card__title {
    font-size: 1.5rem;
    color: #333;
    margin: 0;
}

.card__content {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
}

.card__button {
    background: #667eea;
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* MODIFICADORES */
.card--featured {
    border: 3px solid #667eea;
    background: linear-gradient(135deg, #f0f4ff, #ffffff);
}

.card--disabled {
    opacity: 0.6;
    pointer-events: none;
}

.card__button--secondary {
    background: #764ba2;
}

Cómo usar BEM en HTML:

<div class="card card--featured">
    <div class="card__header">
        <h2 class="card__title">Título de la Tarjeta</h2>
    </div>
    
    <div class="card__content">
        <p>Este es el contenido principal de la tarjeta.</p>
    </div>
    
    <button class="card__button card__button--secondary">
        Hacer algo
    </button>
</div>

Ejemplo Visual

Esta es una tarjeta con la metodología BEM. Fíjate en cómo está estructurado el HTML y los nombres de las clases.

✨ Ventajas de BEM:

  • Legibilidad - Los nombres son claros y descriptivos
  • Mantenibilidad - Fácil de modificar sin romper otras cosas
  • Reutilización - Componentes que puedes usar en todo tu proyecto
  • Evita conflictos - Menos errores por nombres de clases duplicadas

8. Estructura el HTML con Comentarios

Principiante

Los comentarios te ayudan a organizar tu código y explicar qué hace cada sección. Son invisibles en el navegador.

💡 Sintaxis de Comentarios en HTML:

<!-- Tu comentario aquí -->

Ejemplo de Estructura Bien Comentada:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Proyecto</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <!-- ========== ENCABEZADO ========== -->
    <header class="header">
        <div class="header__container">
            <h1 class="header__title">Mi Sitio</h1>
            <p class="header__subtitle">Bienvenido</p>
        </div>
    </header>

    <!-- ========== NAVEGACIÓN ========== -->
    <nav class="navbar">
        <ul class="navbar__list">
            <li class="navbar__item">
                <a href="#inicio">Inicio</a>
            </li>
            <li class="navbar__item">
                <a href="#servicios">Servicios</a>
            </li>
            <li class="navbar__item">
                <a href="#contacto">Contacto</a>
            </li>
        </ul>
    </nav>

    <!-- ========== CONTENIDO PRINCIPAL ========== -->
    <main class="main">

        <!-- Sección de Introducción -->
        <section class="intro">
            <div class="intro__container">
                <h2 class="intro__title">Sobre Mi Proyecto</h2>
                <p class="intro__text">Aquí va el contenido...</p>
            </div>
        </section>

        <!-- Sección de Características -->
        <section class="features">
            <h2 class="features__title">Características</h2>
            
            <!-- Tarjeta de Característica 1 -->
            <div class="feature-card">
                <img src="icono1.svg" alt="Icono" class="feature-card__icon">
                <h3 class="feature-card__title">Rápido</h3>
                <p class="feature-card__text">Descripción...</p>
            </div>

            <!-- Tarjeta de Característica 2 -->
            <div class="feature-card">
                <img src="icono2.svg" alt="Icono" class="feature-card__icon">
                <h3 class="feature-card__title">Seguro</h3>
                <p class="feature-card__text">Descripción...</p>
            </div>
        </section>

    </main>

    <!-- ========== PIE DE PÁGINA ========== -->
    <footer class="footer">
        <div class="footer__container">
            <p class="footer__text">© 2024 Mi Sitio. Todos los derechos reservados.</p>
        </div>
    </footer>

</body>
</html>

Tipos de Comentarios Útiles:

Secciones Principales

Marca las grandes áreas

<!-- ===== ENCABEZADO ===== -->
Subsecciones

Grupos dentro de secciones

<!-- Sección de Características -->
Elementos Repetidos

Cuando se repite un patrón

<!-- Tarjeta 1 -->
Notas Importantes

Avisos o recordatorios

<!-- TODO: Agregar validación -->

Buenas Prácticas:

✅
SÍ - Sé Consistente

Usa siempre el mismo formato para los comentarios (ej: === para separadores grandes).

✅
SÍ - Comenta Lo Complejo

Explica por qué hiciste algo, no solo qué es. El "qué" ya está en el código.

❌
NO - Comenta Todo

No comentes código obvio. Demasiados comentarios hacen el código menos legible.

❌
NO - Dejes Comentarios Desactualizados

Si cambias el código, actualiza también los comentarios.

🎯 Estructura Recomendada:

Combina comentarios claros, metodología BEM y HTML semántico para crear código profesional, mantenible y fácil de entender.

9. Consejos para Comenzar

Todos
1️⃣
Comienza simple

No intentes aprender todo de una vez. Domina las etiquetas básicas primero.

2️⃣
Practica escribiendo código

Crea pequeños proyectos mientras aprendes. La práctica es la mejor maestra.

3️⃣
Usa un buen editor

Descarga VS Code o un editor similar. Te ayudará con sugerencias mientras escribes.

4️⃣
Aprende CSS después

Una vez domines HTML, aprende CSS para darle estilos a tus páginas.

5️⃣
Consulta documentación

MDN Web Docs (developer.mozilla.org) es tu mejor amigo. Tiene todo documentado.

6️⃣
No tengas miedo de experimentar

Cambia cosas, prueba, rompe cosas. Así es como se aprende de verdad.

🎨 Ejemplo Práctico: Tu Primera Página

Aquí te muestro un ejemplo completo de una página simple pero bien estructurada:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Primera Página</title>
</head>
<body>
    <header>
        <h1>Bienvenido a mi página</h1>
    </header>

    <nav>
        <a href="#">Inicio</a>
        <a href="#">Servicios</a>
        <a href="#">Contacto</a>
    </nav>

    <main>
        <section>
            <h2>Sobre mí</h2>
            <p>Hola, soy alguien aprendiendo HTML. 
              👋 Es divertido y relativamente fácil.</p>
        </section>

        <section>
            <h2>Habilidades</h2>
            <ul>
                <li>HTML básico</li>
                <li>Aprendiendo CSS</li>
                <li>Próximo: JavaScript</li>
            </ul>
        </section>
    </main>

    <footer>
        <p>Hecho con <strong>amor</strong> y 
           <strong>HTML</strong></p>
    </footer>
</body>
</html>

✅ Próximos Pasos:

Copia este código en un archivo llamado index.html, ábrelo en tu navegador y verás tu primera página web. ¡Luego, intenta modificarla y añadir más contenido!