Manual de HTML - Guía Interactiva

🎯 Consejos Esenciales para Iniciarse ▼

💡 ¡Perfecto para principiantes! Estos consejos te ayudarán a escribir código HTML limpio y profesional desde el primer día.

🔒 1. Cierra siempre las etiquetas

La mayoría de etiquetas HTML requieren apertura y cierre. Esto mantiene tu código organizado y funcional.

✅ Correcto:

                  <p>Esto es un párrafo
                  correctamente cerrado.</p>

                  <div>
                  <h1>Título principal</h1>
                  </div>
                

❌ Incorrecto:

                  <p>Párrafo sin cerrar

                  <div>
                  <h1>Título sin cerrar
                

⚠️ Excepción: Algunas etiquetas se autocierran: <img>, <br>, <hr>, <input>, <meta>

📐 2. Utiliza sangrías y estructura el código

Las sangrías (indentación) hacen que tu código sea más legible y fácil de mantener.

                <div class="contenedor">
                <header>
                <h1>Mi Página Web</h1>
                <nav>
                <ul>
                <li>
                <a href="#inicio">Inicio</a>
                </li>
                <li>
                <a href="#sobre">Sobre mí</a>
                </li>
                </ul>
                </nav>
                </header>
                </div>
              

💬 3. Deja comentarios para organizarte

Los comentarios te ayudan a recordar qué hace cada sección y facilitan el trabajo en equipo.

                <!-- Encabezado principal de la página -->
                <header>
                <h1>Bienvenido a mi página</h1>
                </header>

                <!-- Sección de contenido principal -->
                <main>
                <!-- Aquí va el contenido más importante -->
                </main>
              

🏷️ 4. Usa nombres descriptivos

Elige nombres claros para clases e IDs que describan la función del elemento.

✅ Nombres descriptivos:

                  <div id="menu-principal"
                    class="navegacion-horizontal">
                  <button class="boton-enviar-formulario">Enviar</button>
                  <section id="galeria-fotos">
                

❌ Nombres poco descriptivos:

                  <div id="div1"
                    class="cosa">
                  <button class="btn">Enviar</button>
                  <section id="s2">
                

🧪 5. Prueba tu código regularmente

No esperes a terminar todo para probar. Guarda frecuentemente y abre tu archivo en el navegador.

🔄 Flujo recomendado: Escribe → Guarda → Actualiza navegador → Verifica → Repite

♿ 6. Aprende sobre accesibilidad

Haz tu sitio accesible para todos los usuarios, incluyendo personas con discapacidades.

                <img src="paisaje.jpg"
                  alt="Hermoso paisaje montañoso al atardecer">

                <button aria-label="Cerrar ventana modal">×</button>

                <input type="email"
                  required
                  aria-describedby="email-help">
              

✅ 7. Valida tu código

Usa herramientas como el Validador de HTML de W3C para encontrar errores.

🔗 Recurso útil: validator.w3.org - Validador oficial de W3C

🏗️ Estructura Básica de HTML ▼

📋 Plantilla base: Todo documento HTML debe seguir esta estructura fundamental.

                <!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</title>
                </head>
                <body>
                <!-- Aquí va todo el contenido visible -->
                <h1>¡Hola Mundo!</h1>
                <p>Esta es mi primera página
                web.</p>
                </body>
                </html>
              

<!DOCTYPE html>

Declara que es un documento HTML5. Siempre va al inicio.

<html>

Elemento raíz que contiene todo el contenido de la página.

<head>

Metadatos no visibles: título, enlaces a CSS, etc.

<body>

Todo el contenido visible de la página web.

🎯 Tip importante: El atributo lang="es" ayuda a los lectores de pantalla y motores de búsqueda a entender el idioma del contenido.

📝 Encabezados y Texto ▼

🏆 Jerarquía de Encabezados

Los encabezados crean una estructura jerárquica en tu contenido.

                <h1>Título Principal (solo uno
                por página)</h1>
                <h2>Sección Principal</h2>
                <h3>Subsección</h3>
                <h4>Sub-subsección</h4>
                <h5>Título menor</h5>
                <h6>Título más pequeño</h6>
              

⚠️ Regla de oro: Usa solo un <h1> por página y mantén la jerarquía lógica (no saltes de h1 a h3).

✏️ Formato de Texto

<p>

Párrafo de texto normal. La base de todo contenido textual.

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

Texto importante (negrita). Enfatiza contenido crucial.

<strong>Muy importante</strong>

<em>

Texto enfatizado (cursiva). Para énfasis sutil.

<em>Texto enfatizado</em>

<br>

Salto de línea. Úsalo con moderación.

Línea 1<br> Línea 2

🔗 Enlaces

                <!-- Enlace externo -->
                <a href="https://google.com"
                  target="_blank">Ir a Google</a>

                <!-- Enlace interno -->
                <a href="#seccion1">Ir a sección 1</a>

                <!-- Enlace de email -->
                <a href="mailto:contacto@ejemplo.com">Enviar email</a>

                <!-- Enlace de teléfono -->
                <a href="tel:+1234567890">Llamar ahora</a>
              

📋 Listas ▼

🔸 Lista Desordenada (Viñetas)

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

🔢 Lista Ordenada (Números)

                <ol>
                <li>Paso 1: Planificar</li>
                <li>Paso 2: Diseñar</li>
                <li>Paso 3: Desarrollar</li>
                </ol>
              

🎯 Lista de Definiciones

                <dl>
                <dt>HTML</dt>
                <dd>Lenguaje de marcado para
                crear páginas web</dd>

                <dt>CSS</dt>
                <dd>Lenguaje para dar estilo a
                páginas web</dd>
                </dl>
              

🌳 Listas Anidadas

                <ul>
                <li>Frutas
                <ul>
                <li>Manzanas</li>
                <li>Naranjas</li>
                </ul>
                </li>
                <li>Verduras
                <ul>
                <li>Zanahorias</li>
                <li>Brócoli</li>
                </ul>
                </li>
                </ul>
              

💡 Consejo: Puedes cambiar el tipo de numeración con CSS o el atributo type en <ol>.

🖼️ Imágenes y Multimedia ▼

📸 Imágenes

                <!-- Imagen básica -->
                <img src="imagen.jpg"
                  alt="Descripción de la imagen">

                <!-- Imagen con dimensiones -->
                <img src="logo.png"
                  alt="Logo de la empresa"
                  width="200"
                  height="100">

                <!-- Imagen responsiva -->
                <img src="foto.jpg"
                  alt="Paisaje hermoso"
                  style="max-width: 100%; height: auto;">
              

⚠️ Importante: El atributo alt es obligatorio para accesibilidad. Describe qué muestra la imagen.

🎬 Videos

                <video controls
                  width="600">
                <source src="video.mp4"
                  type="video/mp4">
                <source src="video.webm"
                  type="video/webm">
                Tu navegador no soporta el elemento video.
                </video>
              

🎵 Audio

                <audio controls>
                <source src="audio.mp3"
                  type="audio/mpeg">
                <source src="audio.ogg"
                  type="audio/ogg">
                Tu navegador no soporta el elemento audio.
                </audio>
              

🌐 Videos de YouTube

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

💡 Tip: Siempre incluye formatos alternativos para mejor compatibilidad entre navegadores.

📊 Tablas ▼

📋 Estructura Básica de Tabla

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

<table>

Contenedor principal de la tabla

<thead>

Encabezado de la tabla

<tbody>

Cuerpo principal con datos

<tr>

Fila de la tabla

<th>

Celda de encabezado (negrita)

<td>

Celda de datos normal

🔗 Celdas que ocupan múltiples columnas/filas

                <table>
                <tr>
                <th colspan="2">Información Personal</th>
                </tr>
                <tr>
                <td>Nombre</td>
                <td>Juan Pérez</td>
                </tr>
                <tr>
                <td rowspan="2">Contacto</td>
                <td>Email: juan@email.com</td>
                </tr>
                <tr>
                <td>Tel: +34 123 456 789</td>
                </tr>
                </table>
              

🎯 Consejo: Usa <caption> para dar un título descriptivo a tu tabla y mejorar la accesibilidad.

📝 Formularios ▼

📋 Formulario Completo

                <form action="/procesar"
                  method="POST">

                <!-- Campo de texto -->
                <label for="nombre">Nombre completo:</label>
                <input type="text"
                  id="nombre"
                  name="nombre"
                  required>

                <!-- Email -->
                <label for="email">Correo electrónico:</label>
                <input type="email"
                  id="email"
                  name="email"
                  required>

                <!-- Contraseña -->
                <label for="password">Contraseña:</label>
                <input type="password"
                  id="password"
                  name="password"
                  required>

                <!-- Área de texto -->
                <label for="mensaje">Mensaje:</label>
                <textarea id="mensaje"
                  name="mensaje"
                  rows="4"
                  cols="50"></textarea>

                <!-- Botón de envío -->
                <button type="submit">Enviar formulario</button>
                </form>
              

🎛️ Tipos de Input

type="text"

Texto normal

type="email"

Validación de email

type="password"

Oculta el texto

type="number"

Solo números

type="date"

Selector de fecha

type="file"

Subir archivos

☑️ Checkboxes y Radio Buttons

                <!-- Checkboxes (múltiple selección) -->
                <fieldset>
                <legend>Selecciona tus
                hobbies:</legend>

                <input type="checkbox"
                  id="lectura"
                  name="hobbies"
                  value="lectura">
                <label for="lectura">Lectura</label>

                <input type="checkbox"
                  id="deportes"
                  name="hobbies"
                  value="deportes">
                <label for="deportes">Deportes</label>
                </fieldset>

                <!-- Radio buttons (una sola selección) -->
                <fieldset>
                <legend>Selecciona tu
                género:</legend>

                <input type="radio"
                  id="masculino"
                  name="genero"
                  value="M">
                <label for="masculino">Masculino</label>

                <input type="radio"
                  id="femenino"
                  name="genero"
                  value="F">
                <label for="femenino">Femenino</label>
                </fieldset>
              

📋 Selects (Listas desplegables)

                <label for="pais">Selecciona tu país:</label>
                <select id="pais"
                  name="pais">
                <option value="">-- Selecciona una opción --</option>
                <option value="es">España</option>
                <option value="mx"
                  selected>México</option>
                <option value="ar">Argentina</option>
                </select>
              

⚠️ Importante: Siempre asocia los <label> con sus inputs usando el atributo for para mejorar la accesibilidad.

🏗️ Divisiones y Secciones ▼

📦 Elementos de Contenedor

<div>

Contenedor genérico sin significado semántico. Perfecto para agrupar elementos.

                    <div class="contenedor">
                    <p>Contenido agrupado</p>
                    </div>
                  

<span>

Contenedor en línea para pequeñas porciones de texto.

                    <p>El precio es
                    <span class="precio">$25</span></p>
                  

🎭 Elementos Semánticos HTML5

Estos elementos dan significado al contenido y mejoran el SEO:

                <header>
                <h1>Mi Blog Personal</h1>
                <nav>
                <ul>
                <li><a href="#inicio">Inicio</a></li>
                <li><a href="#sobre">Sobre mí</a></li>
                </ul>
                </nav>
                </header>

                <main>
                <section id="articulos">
                <h2>Mis Artículos</h2>

                <article>
                <header>
                <h3>Cómo aprender HTML</h3>
                <time datetime="2024-01-15">15 de enero, 2024</time>
                </header>
                <p>En este artículo
                explico...</p>
                </article>
                </section>

                <aside>
                <h3>Enlaces útiles</h3>
                <ul>
                <li><a href="#">Recurso 1</a></li>
                </ul>
                </aside>
                </main>

                <footer>
                <p>© 2024 Mi Blog. Todos los
                derechos reservados.</p>
                </footer>
              

Encabezado de página o sección

<nav>

Enlaces de navegación

<main>

Contenido principal (único)

Sección temática del documento

Contenido independiente

<aside>

Contenido lateral o secundario

Pie de página o sección

<time>

Fechas y horas

🎯 Beneficios del HTML semántico: Mejor SEO, accesibilidad mejorada, código más limpio y mantenible.

🏷️ Atributos Importantes ▼

🆔 ID y Class

                <!-- ID: único en toda la página -->
                <div id="menu-principal">...</div>

                <!-- Class: reutilizable -->
                <p class="texto-destacado">Texto importante</p>
                <p class="texto-destacado">Otro texto importante</p>

                <!-- Múltiples clases -->
                <div class="contenedor principal centrado">...</div>
              

🎨 Atributos de Estilo

                <!-- Estilo en línea (no recomendado para proyectos
                  grandes) -->
                <p style="color: red; font-size: 18px;">Texto rojo</p>

                <!-- Enlace a CSS externo (recomendado) -->
                <link rel="stylesheet"
                  href="estilos.css">
              

🌐 Atributos de Enlaces

                <!-- Abrir en nueva pestaña -->
                <a href="https://ejemplo.com"
                  target="_blank"
                  rel="noopener">Enlace externo</a>

                <!-- Enlace que descarga -->
                <a href="documento.pdf"
                  download>Descargar PDF</a>

                <!-- Enlace con título informativo -->
                <a href="#contacto"
                  title="Ir a la sección de contacto">Contacto</a>
              

♿ Atributos de Accesibilidad

                <!-- Texto alternativo -->
                <img src="logo.png"
                  alt="Logo de la empresa XYZ">

                <!-- Etiquetas ARIA -->
                <button aria-label="Cerrar ventana modal">×</button>

                <!-- Roles ARIA -->
                <div role="navigation">...</div>

                <!-- Tabindex para navegación por teclado -->
                <div tabindex="0">Elemento enfocable</div>
              

📱 Atributos Responsivos

                <!-- Meta viewport (obligatorio) -->
                <meta name="viewport"
                  content="width=device-width, initial-scale=1.0">

                <!-- Imágenes responsivas -->
                <img src="imagen-pequeña.jpg"
                  srcset="imagen-pequeña.jpg 480w, imagen-grande.jpg 800w"
                  sizes="(max-width: 600px) 480px, 800px"
                  alt="Descripción">
              

💡 Regla de oro: Usa id para elementos únicos y class para elementos que comparten estilos.

⚠️ Errores Comunes a Evitar ▼

❌ Errores Frecuentes

1. Olvidar cerrar etiquetas

                  <p>Párrafo sin cerrar
                  <div>División sin cerrar
                

✅ Correcto:

                  <p>Párrafo correctamente
                  cerrado</p>
                  <div>División correctamente
                  cerrada</div>
                

2. Usar múltiples IDs iguales

                  <div id="contenedor">...</div>
                  <div id="contenedor">...</div>
                  <!-- Error: ID duplicado -->
                

✅ Correcto:

                  <div id="contenedor1">...</div>
                  <div id="contenedor2">...</div>

                  <!-- O mejor aún, usar class si comparten estilos
                    -->
                  <div class="contenedor">...</div>
                  <div class="contenedor">...</div>
                

3. Olvidar el atributo alt en imágenes

                  <img src="foto.jpg">
                  <!-- Sin alt -->
                

✅ Correcto:

                  <img src="foto.jpg"
                    alt="Descripción clara de la imagen">
                

4. Anidar incorrectamente las etiquetas

                  <p><div>Contenido</div></p>
                  <!-- No puedes poner div dentro de p -->
                

✅ Correcto:

                  <div>
                  <p>Contenido del párrafo</p>
                  </div>
                

5. No usar labels en formularios

Nombre: <input type="text" name="nombre">

✅ Correcto:

                  <label for="nombre">Nombre:</label>
                  <input type="text"
                    id="nombre"
                    name="nombre">
                

🛠️ Herramientas para Detectar Errores

🔍 Validador W3C: validator.w3.org
🔧 DevTools del navegador: F12 → Console
📝 Extensiones de VS Code: HTML Validation, Auto Close Tag
🎯 Lighthouse: Para auditorías de calidad

💡 Tip profesional: Valida tu HTML regularmente. Un código limpio es más fácil de mantener y tiene mejor rendimiento.

🛠️ Herramientas y Recursos ▼

💻 Editores de Código Recomendados

Visual Studio Code

Gratuito, muchas extensiones, muy popular para desarrollo web.

Sublime Text

Rápido y ligero, perfecto para principiantes.

Atom

Altamente personalizable, bueno para proyectos colaborativos.

Notepad++

Simple y eficaz para Windows.

🧩 Extensiones Útiles para VS Code

🏷️ Auto Rename Tag: Renombra etiquetas automáticamente
🎨 HTML CSS Support: Autocompletado mejorado
🔍 HTML Validate: Valida tu HTML en tiempo real
💡 IntelliSense for CSS class names: Autocompletado de clases CSS
🌈 Color Highlight: Resalta los colores en tu código
📱 Live Server: Servidor local con recarga automática

🌐 Recursos Online Gratuitos

📚 Documentación Oficial:

MDN Web Docs (developer.mozilla.org) - La mejor referencia
W3Schools (w3schools.com) - Tutoriales paso a paso
HTML.com - Guías detalladas

🎯 Práctica Interactiva:

CodePen.io - Editor online para experimentar
JSFiddle - Prueba código rápidamente
Repl.it - Entorno de desarrollo online
FreeCodeCamp - Cursos gratuitos estructurados

🔧 Herramientas de Validación

                🔍 Validador HTML W3C: validator.w3.org 🎨 Validador CSS W3C:
                jigsaw.w3.org/css-validator ♿ Auditor de accesibilidad:
                wave.webaim.org ⚡ Auditor de rendimiento: pagespeed.web.dev
              

🎨 Generadores y Utilidades

🖼️ Placeholder Images: picsum.photos, placeholder.com
🎨 Paletas de colores: coolors.co, adobe.color
📝 Lorem Ipsum: lipsum.com
🔤 Google Fonts: fonts.google.com
🎭 Iconos gratuitos: fontawesome.com, heroicons.com

📖 Plan de Aprendizaje Sugerido

🎯 Ruta de aprendizaje de 4 semanas:

Semana 1: Estructura básica, etiquetas de texto, enlaces
Semana 2: Listas, imágenes, tablas básicas
Semana 3: Formularios, elementos semánticos
Semana 4: Proyecto práctico integrando todo lo aprendido

🚀 Siguiente paso: Una vez domines HTML, aprende CSS para dar estilo a tus páginas, y luego JavaScript para añadir interactividad.

Manual 🚀 HTML-5

🔒 1. Cierra siempre las etiquetas

📐 2. Utiliza sangrías y estructura el código

💬 3. Deja comentarios para organizarte

🏷️ 4. Usa nombres descriptivos

🧪 5. Prueba tu código regularmente

♿ 6. Aprende sobre accesibilidad

✅ 7. Valida tu código

🏆 Jerarquía de Encabezados

✏️ Formato de Texto

🔗 Enlaces

🔸 Lista Desordenada (Viñetas)

🔢 Lista Ordenada (Números)

🎯 Lista de Definiciones

🌳 Listas Anidadas

📸 Imágenes

🎬 Videos

🎵 Audio

🌐 Videos de YouTube

📋 Estructura Básica de Tabla

🔗 Celdas que ocupan múltiples columnas/filas

📋 Formulario Completo

🎛️ Tipos de Input

☑️ Checkboxes y Radio Buttons

📋 Selects (Listas desplegables)

📦 Elementos de Contenedor

🎭 Elementos Semánticos HTML5

🆔 ID y Class

🎨 Atributos de Estilo

🌐 Atributos de Enlaces

♿ Atributos de Accesibilidad

📱 Atributos Responsivos

❌ Errores Frecuentes

🛠️ Herramientas para Detectar Errores

💻 Editores de Código Recomendados

🧩 Extensiones Útiles para VS Code

🌐 Recursos Online Gratuitos

🔧 Herramientas de Validación

🎨 Generadores y Utilidades

📖 Plan de Aprendizaje Sugerido