Introducción a HTML5: Crea tu Primera Página Web en 30 Minutos

¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje estándar para crear páginas web. No es un lenguaje de programación, sino un lenguaje de marcado que define la estructura y el contenido de las páginas web.

Estructura Básica de un Documento HTML

<!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>

Elementos de la Estructura

DOCTYPE

Declara que el documento usa HTML5:

<!DOCTYPE html>

html

Elemento raíz que contiene todo el documento:

<html lang="es">
    <!-- Todo el contenido aquí -->
</html>

head

Contiene metadatos y enlaces a recursos:

<head>
    <meta charset="UTF-8">
    <meta name="description" content="Descripción de la página">
    <meta name="keywords" content="html, web, tutorial">
    <title>Título de la Página</title>
    <link rel="stylesheet" href="estilos.css">
</head>

body

Contiene el contenido visible de la página:

<body>
    <!-- Contenido visible aquí -->
</body>

Encabezados (Headings)

<h1>Encabezado Principal</h1>
<h2>Encabezado Nivel 2</h2>
<h3>Encabezado Nivel 3</h3>
<h4>Encabezado Nivel 4</h4>
<h5>Encabezado Nivel 5</h5>
<h6>Encabezado Nivel 6</h6>

Importante: Usa solo un <h1> por página (para SEO).

Párrafos y Texto

<!-- Párrafo -->
<p>Este es un párrafo de texto.</p>

<!-- Salto de línea -->
<p>Primera línea<br>Segunda línea</p>

<!-- Línea horizontal -->
<hr>

<!-- Texto en negrita -->
<strong>Texto importante</strong>
<b>Texto en negrita</b>

<!-- Texto en cursiva -->
<em>Texto enfatizado</em>
<i>Texto en cursiva</i>

<!-- Texto subrayado -->
<u>Texto subrayado</u>

<!-- Texto tachado -->
<s>Texto tachado</s>

<!-- Texto pequeño -->
<small>Texto pequeño</small>

<!-- Texto marcado -->
<mark>Texto resaltado</mark>

Listas

Lista Ordenada

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

Lista Desordenada

<ul>
    <li>Elemento con viñeta</li>
    <li>Otro elemento</li>
    <li>Un elemento más</li>
</ul>

Lista Anidada

<ul>
    <li>Frutas
        <ul>
            <li>Manzana</li>
            <li>Pera</li>
        </ul>
    </li>
    <li>Verduras
        <ul>
            <li>Zanahoria</li>
            <li>Brócoli</li>
        </ul>
    </li>
</ul>

Enlaces (Links)

<!-- Enlace básico -->
<a href="https://www.google.com">Ir a Google</a>

<!-- Abrir en nueva pestaña -->
<a href="https://www.google.com" target="_blank">Google (nueva pestaña)</a>

<!-- Enlace a otra página del sitio -->
<a href="about.html">Sobre Nosotros</a>

<!-- Enlace a sección de la misma página -->
<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</a>

Imágenes

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

<!-- Imagen con tamaño -->
<img src="imagen.jpg" alt="Descripción" width="300" height="200">

<!-- Imagen responsive -->
<img src="imagen.jpg" alt="Descripción" style="max-width: 100%; height: auto;">

<!-- Imagen como enlace -->
<a href="https://www.ejemplo.com">
    <img src="logo.png" alt="Logo">
</a>

Contenedores Semánticos HTML5

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Estructura Semántica</title>
</head>
<body>
    <!-- Encabezado de la página -->
    <header>
        <h1>Nombre del Sitio</h1>
        <nav>
            <ul>
                <li><a href="#">Inicio</a></li>
                <li><a href="#">Sobre Nosotros</a></li>
                <li><a href="#">Contacto</a></li>
            </ul>
        </nav>
    </header>
    
    <!-- Contenido principal -->
    <main>
        <article>
            <h2>Título del Artículo</h2>
            <p>Contenido del artículo...</p>
        </article>
        
        <section>
            <h2>Sección de Información</h2>
            <p>Contenido de la sección...</p>
        </section>
    </main>
    
    <!-- Barra lateral -->
    <aside>
        <h3>Información Adicional</h3>
        <p>Contenido de la barra lateral...</p>
    </aside>
    
    <!-- Pie de página -->
    <footer>
        <p>© 2025 Mi Sitio Web</p>
    </footer>
</body>
</html>

Tablas

<table border="1">
    <thead>
        <tr>
            <th>Nombre</th>
            <th>Edad</th>
            <th>Ciudad</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ana</td>
            <td>25</td>
            <td>Madrid</td>
        </tr>
        <tr>
            <td>Luis</td>
            <td>30</td>
            <td>Barcelona</td>
        </tr>
    </tbody>
</table>

Formularios

<form action="/procesar" method="POST">
    <!-- Input de texto -->
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre" required>
    <br>
    
    <!-- Email -->
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <br>
    
    <!-- Contraseña -->
    <label for="password">Contraseña:</label>
    <input type="password" id="password" name="password" required>
    <br>
    
    <!-- Radio buttons -->
    <p>Género:</p>
    <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>
    <br>
    
    <!-- Checkbox -->
    <input type="checkbox" id="terminos" name="terminos" required>
    <label for="terminos">Acepto los términos</label>
    <br>
    
    <!-- Select -->
    <label for="pais">País:</label>
    <select id="pais" name="pais">
        <option value="">Seleccione...</option>
        <option value="es">España</option>
        <option value="mx">México</option>
        <option value="ar">Argentina</option>
    </select>
    <br>
    
    <!-- Textarea -->
    <label for="mensaje">Mensaje:</label>
    <textarea id="mensaje" name="mensaje" rows="4" cols="50"></textarea>
    <br>
    
    <!-- Botón de envío -->
    <button type="submit">Enviar</button>
    <button type="reset">Limpiar</button>
</form>

Multimedia

Video

<video width="640" height="360" controls>
    <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>

Iframe (Embeber Contenido)

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

<!-- Google Maps -->
<iframe 
    src="https://www.google.com/maps/embed?pb=..." 
    width="600" 
    height="450" 
    style="border:0;" 
    allowfullscreen="" 
    loading="lazy">
</iframe>

Comentarios

<!-- Esto es un comentario en HTML -->
<!-- 
    Los comentarios pueden 
    tener múltiples líneas 
-->

Caracteres Especiales

&lt;    <  (menor que)
&gt;    >  (mayor que)
&amp;   &  (ampersand)
&quot;  "  (comillas)
&copy;  ©  (copyright)
&nbsp;     (espacio sin salto)
&euro;  €  (euro)
&trade; ™  (trademark)

Ejemplo: Página Web Completa

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Portafolio de Juan Pérez - Desarrollador Web">
    <title>Juan Pérez - Desarrollador Web</title>
</head>
<body>
    <header>
        <h1>Juan Pérez</h1>
        <p>Desarrollador Web Full Stack</p>
        <nav>
            <ul>
                <li><a href="#about">Sobre mí</a></li>
                <li><a href="#projects">Proyectos</a></li>
                <li><a href="#contact">Contacto</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section id="about">
            <h2>Sobre mí</h2>
            <img src="perfil.jpg" alt="Foto de Juan Pérez" width="200">
            <p>Soy un desarrollador web apasionado con 5 años de experiencia en crear sitios web modernos y funcionales.</p>
            <h3>Habilidades</h3>
            <ul>
                <li>HTML5 y CSS3</li>
                <li>JavaScript (React, Vue)</li>
                <li>Python (Django, Flask)</li>
                <li>SQL y NoSQL</li>
            </ul>
        </section>
        
        <section id="projects">
            <h2>Proyectos</h2>
            <article>
                <h3>E-commerce Website</h3>
                <p>Tienda online completa con carrito de compras y pasarela de pago.</p>
                <a href="#">Ver proyecto</a>
            </article>
            <article>
                <h3>Blog Personal</h3>
                <p>Sistema de gestión de contenidos personalizado.</p>
                <a href="#">Ver proyecto</a>
            </article>
        </section>
        
        <section id="contact">
            <h2>Contacto</h2>
            <form action="/enviar" method="POST">
                <label for="nombre">Nombre:</label>
                <input type="text" id="nombre" name="nombre" required>
                <br>
                
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
                <br>
                
                <label for="mensaje">Mensaje:</label>
                <textarea id="mensaje" name="mensaje" rows="5" required></textarea>
                <br>
                
                <button type="submit">Enviar Mensaje</button>
            </form>
        </section>
    </main>
    
    <footer>
        <p>&copy; 2025 Juan Pérez. Todos los derechos reservados.</p>
        <p>
            <a href="https://github.com/juanperez">GitHub</a> | 
            <a href="https://linkedin.com/in/juanperez">LinkedIn</a>
        </p>
    </footer>
</body>
</html>

Buenas Prácticas HTML

Usa etiquetas semánticas: header, nav, main, article, section, aside, footer
Indenta correctamente: Para mejor legibilidad
Siempre cierra las etiquetas: Excepto las auto-cerrantes (img, br, hr)
Usa minúsculas: Para nombres de etiquetas y atributos
Atributo alt en imágenes: Para accesibilidad
Valida tu HTML: Usa el validador de W3C
SEO: Un solo h1, meta description, títulos descriptivos

Conclusión

HTML5 es la base fundamental del desarrollo web. Dominar HTML te permitirá crear estructuras sólidas para tus sitios web. Combina HTML con CSS para estilos y JavaScript para interactividad para crear experiencias web completas y profesionales.