Si llevas un tiempo queriendo crear una página web y siempre lo dejas para después porque no sabes por dónde empezar, este es el tutorial. HTML es lo primero que aprende cualquier desarrollador web, y la curva al principio es mucho más suave de lo que parece desde fuera.
Solo necesitas un editor de texto — el Bloc de notas funciona, aunque VS Code te va a hacer la vida más fácil desde el primer día — y un navegador. Nada más.
Qué es HTML y para qué sirve cada tecnología
HTML define la estructura de una página: qué hay, en qué orden y cómo está organizado. El navegador lee ese archivo y lo convierte en lo que ves en pantalla. Sin HTML no hay página, sin importar lo que hagas con CSS o JavaScript.
La confusión más común al empezar es mezclar los tres: HTML para la estructura, CSS para el aspecto visual, JavaScript para la interactividad. Cada uno tiene su archivo y su función. Intentar hacer todo en uno es el camino más rápido a un lío que no entiendes cómo deshacer.
Lo que necesitas antes de empezar
Un editor de texto y un navegador. Si usas VS Code, instala la extensión Live Server — te permite ver los cambios en tiempo real sin recargar manualmente. Es lo único que marca la diferencia al principio.
Paso 1: La estructura básica de HTML5
Toda página HTML tiene la misma estructura base. Abre tu editor, crea un archivo con extensión .html 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>El <!DOCTYPE html> le dice al navegador que es HTML5. El <head> contiene información sobre la página que no se muestra al usuario — título, charset, metadatos. Todo lo que el usuario ve va dentro del <body>. El lang="es" es importante para accesibilidad y SEO: indica el idioma del contenido.
Guarda el archivo como mi-primera-pagina.html y ábrelo en el navegador. Verás una página en blanco con el texto "¡Hola Mundo!" — sin estilos, sin colores, pero funcionando. Eso es HTML puro.
Paso 2: Añadiendo contenido real
Ahora reemplaza lo que hay dentro del <body> con una estructura más completa. Aquí es donde muchos cometen el primer error: mezclar <header>, <main> y <footer> sin entender para qué sirven. Estas etiquetas semánticas no cambian el aspecto visual, pero le dicen al navegador y a los buscadores qué parte es qué.
<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: Las etiquetas que más vas a usar
Los títulos van de <h1> a <h6> — el h1 es el principal de la página, solo debe haber uno. Los párrafos son <p>. Las listas son <ul> para desordenadas y <ol> para ordenadas, con <li> para cada elemento. Los enlaces son <a href="url"> y el texto en negrita es <strong>.
La etiqueta que más problemas da al principio es <a>: si el enlace no funciona, casi siempre es porque falta el http:// en la URL o porque la ruta al archivo es incorrecta. Para enlaces internos usa rutas relativas (./pagina.html), para externos la URL completa.
Añadir imágenes
Para añadir una imagen usa <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">El atributo alt no es opcional aunque lo parezca: si la imagen no carga, es lo que ve el usuario. Y para SEO y accesibilidad, un alt vacío o mal descrito es peor que nada.
Paso 4: CSS básico dentro del HTML
CSS tiene su propio archivo y su propio tutorial, pero para empezar puedes añadir estilos directamente en el <head> con la etiqueta <style>. No es la forma más ordenada de trabajar — cuando el proyecto crece, el CSS inline se convierte en un caos — pero para una primera página está bien.
<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: El código completo
Aquí tienes todo junto en un solo archivo. Crea uno nuevo llamado mi-pagina-completa.html, pega esto y ábrelo en el navegador:
<!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>Qué practicar a partir de aquí
La página que tienes funciona, pero está vacía de contenido tuyo. Lo más útil que puedes hacer ahora es sustituir los textos de ejemplo por los tuyos — nombre, intereses, proyectos reales — y añadir una segunda página HTML enlazada desde la primera. Ese ejercicio de crear un enlace entre dos archivos locales es donde la mayoría se atasca la primera vez, y resolverlo te aclara cómo funcionan las rutas relativas.
Después de eso, lo que sigue es CSS: sin él, tu página tiene estructura pero ningún aspecto visual. El siguiente paso natural es aprender a separar los estilos en un archivo styles.css y enlazarlo desde el HTML.
Qué sigue después
Con HTML tienes la estructura. Lo que le falta a tu página para parecer algo real es CSS para el diseño y JavaScript para que los elementos respondan a las acciones del usuario. El orden importa: intenta dominar uno antes de saltar al siguiente, o acabarás con tres cosas a medias que no entiendes del todo.
Preguntas frecuentes
¿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.
El siguiente paso: aprende a dar estilo a lo que acabas de construir.