HTML5 para principiantes: Tu primera página web paso a paso

¿Quieres crear páginas web pero no sabes por dónde empezar? HTML es el primer paso para cualquier desarrollador web. En este tutorial aprenderás a crear tu primera página desde cero, sin conocimientos previos.

Al final de esta guía tendrás tu primera página web funcionando y entenderás los conceptos básicos que necesitas para seguir aprendiendo.

1 Archivo HTML que crearás

20 Minutos para completar

0€ Costo total

🤔 ¿Qué es HTML5?

HTML (HyperText Markup Language) es el "esqueleto" de todas las páginas web. Imagina que estás construyendo una casa:

HTML: Es la estructura (paredes, puertas, ventanas)
CSS: Es la decoración (pintura, muebles, estilo)
JavaScript: Es la funcionalidad (electricidad, plomería, automatizaciones)

HTML5 es la versión más reciente y moderna de HTML. Incluye nuevas etiquetas y características que hacen más fácil crear páginas web profesionales.

🛠️ Lo que necesitas antes de empezar

¡Solo necesitas esto:

Un editor de texto: Bloc de notas, Notepad++, o mejor aún Visual Studio Code (gratis)
Un navegador: Chrome, Firefox, Edge, cualquiera sirve
15-20 minutos: Para seguir este tutorial completo

📝 Paso 1: La estructura básica de HTML5

Toda página HTML5 tiene la misma estructura básica. Abre tu editor de texto y escribe esto:

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

                📖 ¿Qué significa cada parte?
                <!DOCTYPE html>: Le dice al navegador que es HTML5
<html lang="es">: Contenedor principal, idioma en español
<head>: Información sobre la página (no se ve)
<title>: Título que aparece en la pestaña del navegador
<body>: Contenido visible de la página

            

Guarda este archivo como "mi-primera-pagina.html" y ábrelo con tu navegador. ¡Ya tienes tu primera página web!

🏗️ Paso 2: Agregando contenido básico

Ahora vamos a añadir más contenido a tu página. Reemplaza todo lo que está dentro de <body> con esto:

<body>
    <!-- Encabezado principal -->
    <header>
        <h1>Bienvenido a mi sitio web</h1>
        <nav>
            <ul>
                <li><a href="#inicio">Inicio</a></li>
                <li><a href="#sobre-mi">Sobre Mí</a></li>
                <li><a href="#contacto">Contacto</a></li>
            </ul>
        </nav>
    </header>

    <!-- Contenido principal -->
    <main>
        <section id="inicio">
            <h2>¡Hola! Soy [Tu Nombre]</h2>
            <p>Bienvenido a mi primera página web. Estoy aprendiendo HTML5 y esto es solo el comienzo.</p>
            
            <h3>Mis objetivos de aprendizaje:</h3>
            <ul>
                <li>Aprender HTML5 y CSS</li>
                <li>Dominar JavaScript</li>
                <li>Crear proyectos web reales</li>
                <li>Conseguir mi primer trabajo en tech</li>
            </ul>
        </section>

        <section id="sobre-mi">
            <h2>Sobre Mí</h2>
            <p>Soy una persona curiosa que está empezando en el mundo de la programación. Me gusta aprender cosas nuevas y crear proyectos útiles.</p>
            
            <h3>Mis intereses:</h3>
            <ol>
                <li>Desarrollo Web</li>
                <li>Tecnología</li>
                <li>Aprender idiomas</li>
                <li>Leer libros</li>
            </ol>
        </section>

        <section id="contacto">
            <h2>Contacto</h2>
            <p>¿Quieres contactar conmigo? Aquí tienes mis datos:</p>
            <ul>
                <li>Email: tu-email@ejemplo.com</li>
                <li>LinkedIn: <a href="#">Mi perfil de LinkedIn</a></li>
                <li>GitHub: <a href="#">Mis proyectos en GitHub</a></li>
            </ul>
        </section>
    </main>

    <!-- Pie de página -->
    <footer>
        <p>© 2025 Mi Primera Página Web. Hecho con HTML5.</p>
    </footer>
</body>

🏷️ Paso 3: Entendiendo las etiquetas HTML más importantes

HTML funciona con etiquetas. Cada etiqueta tiene un propósito específico:

                📋 Etiquetas esenciales que debes conocer:
                <h1> a <h6>: Títulos (h1 es el más grande)
<p>: Párrafos de texto
<ul> y <ol>: Listas (sin orden y ordenadas)
<li>: Elementos de lista
<a>: Enlaces
<strong>: Texto en negrita
<em>: Texto en cursiva

            

🖼️ Añadiendo imágenes a tu página

Para añadir una imagen, usa la etiqueta <img>. Añade esto dentro de tu sección "sobre-mi":

<img src="https://via.placeholder.com/300x200" alt="Mi foto de perfil" width="300" height="200">

Atributos importantes:

src: La ubicación de la imagen
alt: Texto alternativo (importante para accesibilidad)
width y height: Dimensiones de la imagen

🎨 Paso 4: Añadiendo estilo básico con CSS inline

Aunque CSS merece su propio tutorial, podemos añadir algunos estilos básicos directamente en HTML. Añade esto en la sección <head>:

<style>
    body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        margin: 0;
        padding: 20px;
        background-color: #f4f4f4;
    }
    
    header {
        background: #333;
        color: white;
        padding: 20px;
        border-radius: 5px;
    }
    
    nav ul {
        list-style: none;
        padding: 0;
    }
    
    nav li {
        display: inline;
        margin-right: 20px;
    }
    
    nav a {
        color: white;
        text-decoration: none;
    }
    
    main {
        background: white;
        padding: 30px;
        margin: 20px 0;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
    section {
        margin-bottom: 30px;
    }
    
    footer {
        text-align: center;
        background: #333;
        color: white;
        padding: 20px;
        border-radius: 5px;
    }
</style>

✅ Paso 5: Tu página completa

Aquí tienes el código completo de tu primera página HTML5. Crea un nuevo archivo llamado "mi-pagina-completa.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 - Portfolio Personal</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        
        header {
            background: #333;
            color: white;
            padding: 20px;
            border-radius: 5px;
        }
        
        nav ul {
            list-style: none;
            padding: 0;
        }
        
        nav li {
            display: inline;
            margin-right: 20px;
        }
        
        nav a {
            color: white;
            text-decoration: none;
        }
        
        main {
            background: white;
            padding: 30px;
            margin: 20px 0;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        section {
            margin-bottom: 30px;
        }
        
        footer {
            text-align: center;
            background: #333;
            color: white;
            padding: 20px;
            border-radius: 5px;
        }
        
        img {
            max-width: 100%;
            height: auto;
            border-radius: 5px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <header>
        <h1>Bienvenido a mi sitio web</h1>
        <nav>
            <ul>
                <li><a href="#inicio">Inicio</a></li>
                <li><a href="#sobre-mi">Sobre Mí</a></li>
                <li><a href="#proyectos">Proyectos</a></li>
                <li><a href="#contacto">Contacto</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="inicio">
            <h2>¡Hola! Soy [Tu Nombre]</h2>
            <p>Bienvenido a mi primera página web. Estoy aprendiendo HTML5 y este es mi primer proyecto real.</p>
            
            <h3>Lo que estoy aprendiendo:</h3>
            <ul>
                <li>HTML5: La estructura de las páginas web</li>
                <li>CSS: Para hacer páginas bonitas</li>
                <li>JavaScript: Para añadir interactividad</li>
                <li>Proyectos reales: Portafolio, tienda online, blog</li>
            </ul>
        </section>

        <section id="sobre-mi">
            <h2>Sobre Mí</h2>
            <img src="https://via.placeholder.com/300x200" alt="Mi foto de perfil">
            <p>Soy una persona apasionada por la tecnología que está dando sus primeros pasos en el desarrollo web. Me gusta resolver problemas y crear cosas útiles.</p>
            
            <h3>Mis intereses:</h3>
            <ol>
                <li>Programación web</li>
                <li>Tecnología e innovación</li>
                <li>Aprender constantemente</li>
                <li>Ayudar a otros</li>
            </ol>
        </section>

        <section id="proyectos">
            <h2>Mis Futuros Proyectos</h2>
            <p>Estos son los proyectos que planeo crear mientras aprendo:</p>
            <ul>
                <li>Portfolio personal: Una versión mejorada de esta página</li>
                <li>Calculadora web: Mi primer proyecto con JavaScript</li>
                <li>Lista de tareas: Una app para organizar mis estudios</li>
                <li>Blog personal: Para documentar mi aprendizaje</li>
            </ul>
        </section>

        <section id="contacto">
            <h2>Contacto</h2>
            <p>¿Quieres contactar conmigo o seguir mi progreso? Aquí me puedes encontrar:</p>
            <ul>
                <li>Email: tu-email@ejemplo.com</li>
                <li>LinkedIn: <a href="#">Mi perfil profesional</a></li>
                <li>GitHub: <a href="#">Mis proyectos de código</a></li>
                <li>Twitter: <a href="#">@tu_usuario</a></li>
            </ul>
        </section>
    </main>

    <footer>
        <p>© 2025 Mi Primera Página Web. Hecho con HTML5 siguiendo el tutorial de StudyCode Pro.</p>
    </footer>
</body>
</html>

🎯 ¡Lo conseguiste! Tu primera página web está lista

¿Has seguido todos los pasos? ¡Felicidades! Ya tienes tu primera página web funcionando con:

✅ Estructura HTML5 válida

🎨 Estilos CSS básicos

📱 Responsive design

🔗 Navegación con enlaces

🔄 Ejercicios para practicar

Para afianzar lo aprendido, prueba estos ejercicios:

Personaliza el contenido: Cambia textos, nombres y enlaces por los tuyos
Añade más secciones: Hobbies, experiencia laboral, educación
Cambia los colores: Modifica el CSS para usar tus colores favoritos
Añade más imágenes: Galería de fotos, iconos, logos
Crea otra página: Haz una segunda página HTML y enlázala

🎓 ¿Qué sigue después de HTML5?

Ya dominas lo básico de HTML5. El siguiente paso en tu camino como desarrollador web es:

                📚 Tu ruta de aprendizaje:
                CSS avanzado: Flexbox, Grid, animaciones, responsive design
JavaScript básico: Variables, funciones, DOM manipulation
Proyectos prácticos: Calculadora, lista de tareas, juegos simples
JavaScript avanzado: APIs, asíncrono, frameworks
Backend básico: Node.js, bases de datos

            

❓ Preguntas frecuentes sobre HTML5

¿Necesito saber HTML5 perfecto antes de aprender CSS?

No, puedes ir aprendiendo ambos a la vez. HTML5 y CSS trabajan juntos, así que es natural aprenderlos de forma paralela. Lo importante es entender los fundamentos de HTML primero.

¿Puedo crear una página web profesional solo con HTML5?

HTML5 solo te da la estructura. Para una página profesional necesitarás CSS para el diseño y JavaScript para la interactividad. Pero este tutorial es el primer paso perfecto.

¿Es HTML5 difícil de aprender?

¡Para nada! HTML5 es uno de los lenguajes más fáciles para empezar en programación. Si has seguido este tutorial, ya sabes lo básico. Solo necesitas práctica y más proyectos.

¿Qué editor de código recomiendas para HTML5?

Visual Studio Code es perfecto para principiantes. Es gratis, tiene autocompletado de HTML5 y extensiones útiles. También puedes usar Sublime Text o Atom.

¿Cómo publico mi página web en internet?

Puedes usar servicios gratuitos como GitHub Pages, Netlify, o Vercel. En nuestro tutorial sobre hosting gratis 2025 te explicamos todas las opciones.

🚀 Próximos pasos en tu carrera

Has completado tu primera página web con HTML5. Esto es solo el comienzo de tu viaje como desarrollador web:

✅ CSS avanzado - Haz que tus páginas se vean profesionales
✅ JavaScript interactivo - Añade funcionalidad a tus páginas
✅ Proyectos del mundo real - Portfolio, e-commerce, blogs
✅ Frameworks modernos - React, Vue, Angular

📚 Continúa tu aprendizaje

Siguiente tutorial recomendado: CSS para formularios modernos - Aprende a darle estilo profesional a tus páginas web.

En StudyCode Pro te acompañamos paso a paso desde cero hasta conseguir tu primer trabajo como desarrollador. Cada tutorial es práctico y te acerca más a ser un profesional.

📧 ¿Te ha gustado este tutorial?

Si este tutorial te ha servido para crear tu primera página web, únete a nuestra comunidad. Tenemos más tutoriales prácticos como este esperándote.

📬 Únete Gratis