HTML – Club Programador

Proyecto final HTML + CSS: crear una página web completa y responsive

Proyecto final de HTML y CSS: construí una landing page completa y responsive desde cero usando Flexbox, Grid, media queries y posicionamiento.

En esta serie aprendimos HTML y CSS desde sus fundamentos hasta Flexbox, Grid, responsive design y posicionamiento. Ahora vamos a integrar todo en un proyecto completo.

El objetivo será construir una landing page responsive para una academia ficticia llamada CodeStart.

Importante: este proyecto utiliza solamente HTML y CSS. Todavía no hay lógica ni interacción programada con JavaScript.

Qué vamos a construir

La página tendrá:

cabecera con navegación;
sección principal o hero;
tarjetas de cursos;
sección de beneficios;
llamada a la acción;
pie de página;
diseño responsive;
Flexbox y CSS Grid;
posicionamiento y elementos decorativos.

Estructura de archivos

Creá una carpeta para el proyecto y dentro guardá estos archivos:

codestart/
|
|-- index.html
|-- styles.css

Recordá que el archivo HTML debe guardarse realmente con extensión .html. Por ejemplo: index.html.

Paso 1: crear el HTML

Este será nuestro archivo index.html completo:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeStart - Aprendé desarrollo web</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <header class="cabecera">
        <div class="contenedor cabecera-interior">

            <a href="#" class="logo">
                CodeStart
            </a>

            <nav class="menu">
                <a href="#cursos">Cursos</a>
                <a href="#beneficios">Beneficios</a>
                <a href="#contacto">Contacto</a>
            </nav>

        </div>
    </header>

    <main>

        <section class="hero">

            <div class="contenedor hero-grid">

                <div class="hero-contenido">

                    <span class="etiqueta">
                        Aprendé paso a paso
                    </span>

                    <h1>
                        Empezá hoy tu camino en desarrollo web
                    </h1>

                    <p>
                        Aprendé HTML, CSS y JavaScript con ejercicios,
                        proyectos y explicaciones claras.
                    </p>

                    <a href="#cursos" class="boton">
                        Ver cursos
                    </a>

                </div>

                <div class="hero-tarjeta">

                    <span class="badge">
                        Ruta recomendada
                    </span>

                    <h2>Desarrollo Web</h2>

                    <ul>
                        <li>HTML</li>
                        <li>CSS</li>
                        <li>JavaScript</li>
                    </ul>

                </div>

            </div>

        </section>

        <section id="cursos" class="seccion">

            <div class="contenedor">

                <div class="titulo-seccion">
                    <span>Cursos</span>
                    <h2>Empezá por los fundamentos</h2>
                    <p>
                        Una ruta progresiva para aprender desde cero.
                    </p>
                </div>

                <div class="grid-cursos">

                    <article class="curso">
                        <span class="numero">01</span>
                        <h3>HTML</h3>
                        <p>
                            Aprendé a estructurar correctamente una página web.
                        </p>
                    </article>

                    <article class="curso">
                        <span class="numero">02</span>
                        <h3>CSS</h3>
                        <p>
                            Diseñá interfaces, layouts y sitios responsive.
                        </p>
                    </article>

                    <article class="curso">
                        <span class="numero">03</span>
                        <h3>JavaScript</h3>
                        <p>
                            Incorporá comportamiento e interacción a tus páginas.
                        </p>
                    </article>

                </div>

            </div>

        </section>

        <section id="beneficios" class="seccion beneficios">

            <div class="contenedor beneficios-grid">

                <div>
                    <span class="subtitulo">Por qué aprender acá</span>
                    <h2>Aprender haciendo</h2>

                    <p>
                        La mejor forma de entender desarrollo web es escribir
                        código, cometer errores y resolver problemas reales.
                    </p>
                </div>

                <div class="lista-beneficios">

                    <article>
                        <h3>Ejemplos claros</h3>
                        <p>Código explicado paso a paso.</p>
                    </article>

                    <article>
                        <h3>Práctica constante</h3>
                        <p>Ejercicios para consolidar cada concepto.</p>
                    </article>

                    <article>
                        <h3>Proyectos reales</h3>
                        <p>Integración de conocimientos en proyectos completos.</p>
                    </article>

                </div>

            </div>

        </section>

        <section class="cta">

            <div class="contenedor cta-interior">

                <div>
                    <h2>¿Listo para empezar?</h2>
                    <p>
                        El mejor momento para practicar es ahora.
                    </p>
                </div>

                <a href="#cursos" class="boton boton-claro">
                    Comenzar
                </a>

            </div>

        </section>

    </main>

    <footer id="contacto" class="footer">

        <div class="contenedor footer-interior">

            <p>
                © CodeStart
            </p>

            <p>
                Proyecto educativo HTML + CSS
            </p>

        </div>

    </footer>

</body>
</html>

Paso 2: crear los estilos base

Ahora abrí styles.css.

Empezamos normalizando el modelo de caja y definiendo estilos generales:

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: #1f2937;
    background-color: #ffffff;
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

.contenedor {
    width: 90%;
    max-width: 1180px;
    margin: 0 auto;
}

Paso 3: cabecera y navegación

Usaremos Flexbox para distribuir el logo y el menú.

.cabecera {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid #e5e7eb;
}

.cabecera-interior {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
}

.logo {
    color: #007bff;
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
}

.menu {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.menu a {
    text-decoration: none;
    font-weight: 600;
}

Paso 4: sección principal

El hero combinará Grid, tipografía adaptable y un fondo degradado.

.hero {
    padding: clamp(4rem, 9vw, 8rem) 0;
    color: white;
    background: linear-gradient(135deg, #0b1220, #1e3a8a);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

.hero h1 {
    max-width: 760px;
    margin: 1rem 0;
    font-size: clamp(2.5rem, 7vw, 4.8rem);
    line-height: 1.05;
}

.hero-contenido p {
    max-width: 650px;
    margin-bottom: 2rem;
    font-size: 1.1rem;
    color: #dbeafe;
}

.etiqueta,
.subtitulo {
    display: inline-block;
    color: #93c5fd;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.boton {
    display: inline-block;
    padding: 0.9rem 1.4rem;
    color: white;
    background-color: #007bff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
}

Paso 5: tarjeta destacada y posicionamiento

Vamos a aprovechar position: relative y absolute para ubicar una etiqueta.

.hero-tarjeta {
    position: relative;
    padding: 2rem;
    color: #0b1220;
    background-color: white;
    border-radius: 16px;
}

.hero-tarjeta ul {
    margin: 1.5rem 0 0;
    padding-left: 1.2rem;
}

.badge {
    position: absolute;
    top: -14px;
    right: 20px;
    padding: 0.45rem 0.8rem;
    color: #0b1220;
    background-color: #fbbf24;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
}

Paso 6: sección de cursos con CSS Grid

.seccion {
    padding: clamp(4rem, 8vw, 7rem) 0;
}

.titulo-seccion {
    max-width: 680px;
    margin-bottom: 2.5rem;
}

.titulo-seccion > span {
    color: #007bff;
    font-weight: 700;
    text-transform: uppercase;
}

.titulo-seccion h2 {
    margin: 0.5rem 0;
    font-size: clamp(2rem, 4vw, 3rem);
}

.grid-cursos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.curso {
    position: relative;
    padding: 2rem;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background-color: #ffffff;
}

.numero {
    display: inline-block;
    margin-bottom: 1rem;
    color: #007bff;
    font-weight: 700;
}

.curso h3 {
    margin: 0 0 0.7rem;
    font-size: 1.5rem;
}

Paso 7: beneficios

.beneficios {
    background-color: #f8fafc;
}

.beneficios-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

.beneficios h2 {
    margin: 0.5rem 0 1rem;
    font-size: clamp(2rem, 4vw, 3rem);
}

.lista-beneficios {
    display: grid;
    gap: 1rem;
}

.lista-beneficios article {
    padding: 1.4rem;
    background-color: white;
    border-left: 4px solid #007bff;
    border-radius: 8px;
}

.lista-beneficios h3 {
    margin-top: 0;
}

Paso 8: llamada a la acción

.cta {
    padding: 3rem 0;
    color: white;
    background-color: #007bff;
}

.cta-interior {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
}

.cta h2,
.cta p {
    margin-top: 0;
}

.boton-claro {
    color: #0b1220;
    background-color: white;
}

Paso 9: footer

.footer {
    padding: 2rem 0;
    color: #cbd5e1;
    background-color: #0b1220;
}

.footer-interior {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer p {
    margin: 0;
}

Paso 10: hacerlo responsive

El diseño base fue pensado primero para pantallas pequeñas. Ahora ampliamos el layout cuando tenemos más espacio.

@media (min-width: 768px) {

    .cabecera-interior {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .hero-grid {
        grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
    }

    .beneficios-grid {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .cta-interior {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .footer-interior {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

CSS completo

Si preferís comparar el resultado final, este es el archivo styles.css completo:

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: #1f2937;
    background-color: #ffffff;
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

.contenedor {
    width: 90%;
    max-width: 1180px;
    margin: 0 auto;
}

.cabecera {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid #e5e7eb;
}

.cabecera-interior {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
}

.logo {
    color: #007bff;
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
}

.menu {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.menu a {
    text-decoration: none;
    font-weight: 600;
}

.hero {
    padding: clamp(4rem, 9vw, 8rem) 0;
    color: white;
    background: linear-gradient(135deg, #0b1220, #1e3a8a);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

.hero h1 {
    max-width: 760px;
    margin: 1rem 0;
    font-size: clamp(2.5rem, 7vw, 4.8rem);
    line-height: 1.05;
}

.hero-contenido p {
    max-width: 650px;
    margin-bottom: 2rem;
    font-size: 1.1rem;
    color: #dbeafe;
}

.etiqueta,
.subtitulo {
    display: inline-block;
    color: #93c5fd;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.boton {
    display: inline-block;
    padding: 0.9rem 1.4rem;
    color: white;
    background-color: #007bff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
}

.hero-tarjeta {
    position: relative;
    padding: 2rem;
    color: #0b1220;
    background-color: white;
    border-radius: 16px;
}

.hero-tarjeta ul {
    margin: 1.5rem 0 0;
    padding-left: 1.2rem;
}

.badge {
    position: absolute;
    top: -14px;
    right: 20px;
    padding: 0.45rem 0.8rem;
    color: #0b1220;
    background-color: #fbbf24;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
}

.seccion {
    padding: clamp(4rem, 8vw, 7rem) 0;
}

.titulo-seccion {
    max-width: 680px;
    margin-bottom: 2.5rem;
}

.titulo-seccion > span {
    color: #007bff;
    font-weight: 700;
    text-transform: uppercase;
}

.titulo-seccion h2,
.beneficios h2 {
    margin: 0.5rem 0 1rem;
    font-size: clamp(2rem, 4vw, 3rem);
}

.grid-cursos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.curso {
    position: relative;
    padding: 2rem;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background-color: #ffffff;
}

.numero {
    display: inline-block;
    margin-bottom: 1rem;
    color: #007bff;
    font-weight: 700;
}

.curso h3 {
    margin: 0 0 0.7rem;
    font-size: 1.5rem;
}

.beneficios {
    background-color: #f8fafc;
}

.beneficios-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

.lista-beneficios {
    display: grid;
    gap: 1rem;
}

.lista-beneficios article {
    padding: 1.4rem;
    background-color: white;
    border-left: 4px solid #007bff;
    border-radius: 8px;
}

.lista-beneficios h3 {
    margin-top: 0;
}

.cta {
    padding: 3rem 0;
    color: white;
    background-color: #007bff;
}

.cta-interior {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
}

.cta h2,
.cta p {
    margin-top: 0;
}

.boton-claro {
    color: #0b1220;
    background-color: white;
}

.footer {
    padding: 2rem 0;
    color: #cbd5e1;
    background-color: #0b1220;
}

.footer-interior {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer p {
    margin: 0;
}

@media (min-width: 768px) {

    .cabecera-interior {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .hero-grid {
        grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
    }

    .beneficios-grid {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .cta-interior {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .footer-interior {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

Qué conceptos estamos integrando

Este proyecto utiliza prácticamente toda la ruta de CSS:

selectores;
clases;
modelo de caja;
tipografías;
colores y fondos;
unidades relativas;
clamp();
Flexbox;
CSS Grid;
gap;
minmax();
responsive design;
media queries;
mobile-first;
position: sticky;
position: absolute;
z-index.

Cómo probar el proyecto

Guardá ambos archivos y abrí index.html con tu navegador.

Después:

agrandá y achicá la ventana;
probá el modo responsive de las herramientas de desarrollo;
verificá que no aparezca scroll horizontal;
observá cómo cambia el hero a partir de 768px;
comprobá cómo las tarjetas se reorganizan automáticamente.

Mejoras para practicar por tu cuenta

Podés continuar el proyecto agregando:

una imagen real en el hero;
más tarjetas;
una sección de testimonios;
un formulario de contacto;
estados :hover para enlaces y botones;
transiciones CSS;
un menú específico para pantallas pequeñas;
una segunda página;
una paleta de colores propia.

HTML, CSS y el siguiente paso

Con HTML ya podemos definir la estructura y el significado del contenido.

Con CSS podemos controlar la presentación, el layout y la adaptación visual.

Pero todavía nuestro sitio no puede reaccionar realmente a acciones del usuario, tomar decisiones o modificar dinámicamente el contenido.

Ahí entra JavaScript.

HTML       → estructura y contenido
CSS        → estilos y presentación
JavaScript → comportamiento e interacción

Ruta completada

Si llegaste hasta acá, ya recorriste una base muy sólida de HTML y CSS.

La guía anterior fue:

Posicionamiento en CSS: static, relative, absolute, fixed, sticky y z-index

El próximo gran paso de la ruta será:

Introducción a JavaScript: qué es, cómo funciona y para qué se utiliza.

¿Te sirvió este proyecto? ☕

Si este contenido te ayudó a aprender desarrollo web, podés apoyar a Club Programador.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

Proyecto final HTML: crear una página web completa desde cero

Proyecto final de HTML paso a paso: construí una página web completa con estructura semántica, navegación, imágenes, listas, tablas y formulario de contacto.

Ya vimos los fundamentos de HTML, las etiquetas esenciales, los formularios y la estructura semántica de una página. En este proyecto final vamos a integrar todo lo aprendido para construir una página web completa desde cero.

Importante: HTML no es un lenguaje de programación. En este proyecto vamos a utilizarlo para definir la estructura y el contenido de la página.

¿Qué vamos a construir?

Vamos a crear una página personal de presentación para un estudiante de programación.

La página tendrá:

encabezado;
menú de navegación;
sección de presentación;
lista de tecnologías;
proyectos;
tabla de cursos;
formulario de contacto;
contenido complementario;
pie de página.

¿Por qué la página todavía se verá simple?

En este proyecto vamos a trabajar únicamente con HTML, por lo que el navegador mostrará la estructura con sus estilos básicos.

Para controlar colores, tipografías, tamaños, márgenes, posiciones y el aspecto visual utilizamos CSS (Cascading Style Sheets), es decir, las hojas de estilo.

CSS será justamente el siguiente paso de nuestra ruta de aprendizaje. Primero construiremos correctamente la estructura con HTML y luego aprenderemos a darle diseño.

Importante: para que el navegador interprete el contenido como una página HTML, debemos guardar el archivo con extensión .html. Por ejemplo: index.html.

No alcanza con guardar el código como un archivo .txt. La extensión .html identifica al archivo como un documento HTML que puede ser abierto e interpretado por un navegador.

Podemos crear index.html con cualquier editor de texto, guardar los cambios y luego abrirlo con Chrome, Firefox, Edge u otro navegador.

Estructura de archivos

Para este proyecto podemos crear una carpeta como esta:

mi-portfolio/
|
|-- index.html
|
|-- imagenes/
    |-- perfil.jpg

El archivo principal será index.html.

Paso 1: estructura básica del documento

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>Mi portfolio de programador</title>
</head>

<body>

</body>

</html>

Esta es la base sobre la que vamos a construir toda la página.

Paso 2: encabezado principal

<header>

    <h1>Juan Pérez</h1>

    <p>
        Estudiante de programación
        y desarrollo web
    </p>

</header>

El encabezado presenta al autor de la página.

Paso 3: navegación

<nav>

    <a href="#sobre-mi">Sobre mí</a>
    <a href="#tecnologias">Tecnologías</a>
    <a href="#proyectos">Proyectos</a>
    <a href="#cursos">Cursos</a>
    <a href="#contacto">Contacto</a>

</nav>

Cada enlace apunta a una sección identificada mediante un atributo id.

Paso 4: contenido principal

El contenido central de la página estará dentro de main.

<main>

    ...

</main>

Paso 5: sección Sobre mí

<section id="sobre-mi">

    <h2>Sobre mí</h2>

    <img
        src="imagenes/perfil.jpg"
        alt="Foto de perfil de Juan Pérez"
        width="200"
    >

    <p>
        Estoy aprendiendo programación
        y desarrollo web.
    </p>

    <p>
        Comencé estudiando lógica de programación
        y actualmente estoy aprendiendo HTML.
    </p>

</section>

La imagen incluye un atributo alt descriptivo, importante para accesibilidad.

Paso 6: tecnologías que estoy aprendiendo

<section id="tecnologias">

    <h2>Tecnologías que estoy aprendiendo</h2>

    <ul>
        <li>PSeInt</li>
        <li>Python</li>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>

</section>

Utilizamos una lista porque el orden de las tecnologías no es esencial.

Paso 7: proyectos

Cada proyecto puede representarse mediante un elemento article, ya que tiene sentido como contenido independiente.

<section id="proyectos">

    <h2>Mis proyectos</h2>

    <article>

        <h3>Sistema de gestión de alumnos</h3>

        <p>
            Proyecto realizado en Python
            para practicar listas,
            funciones y búsqueda de datos.
        </p>

        <a href="#">Ver proyecto</a>

    </article>

    <article>

        <h3>Mi primera página web</h3>

        <p>
            Página creada utilizando
            HTML semántico.
        </p>

        <a href="#">Ver proyecto</a>

    </article>

</section>

Paso 8: tabla de cursos

<section id="cursos">

    <h2>Cursos y contenidos completados</h2>

    <table>

        <thead>

            <tr>
                <th>Curso</th>
                <th>Estado</th>
            </tr>

        </thead>

        <tbody>

            <tr>
                <td>PSeInt</td>
                <td>Completado</td>
            </tr>

            <tr>
                <td>Python</td>
                <td>Completado</td>
            </tr>

            <tr>
                <td>HTML</td>
                <td>En curso</td>
            </tr>

        </tbody>

    </table>

</section>

Paso 9: formulario de contacto

<section id="contacto">

    <h2>Contacto</h2>

    <form action="/contacto" method="post">

        <p>

            <label for="nombre">
                Nombre
            </label><br>

            <input
                type="text"
                id="nombre"
                name="nombre"
                required
            >

        </p>

        <p>

            <label for="email">
                Correo electrónico
            </label><br>

            <input
                type="email"
                id="email"
                name="email"
                required
            >

        </p>

        <p>

            <label for="motivo">
                Motivo
            </label><br>

            <select
                id="motivo"
                name="motivo"
                required
            >

                <option value="">
                    Seleccione una opción
                </option>

                <option value="consulta">
                    Consulta
                </option>

                <option value="proyecto">
                    Proyecto
                </option>

                <option value="otro">
                    Otro
                </option>

            </select>

        </p>

        <p>

            <label for="mensaje">
                Mensaje
            </label><br>

            <textarea
                id="mensaje"
                name="mensaje"
                rows="6"
                required
            ></textarea>

        </p>

        <button type="submit">
            Enviar
        </button>

    </form>

</section>

Recordatorio: este formulario todavía no guardará ni enviará realmente la información por sí solo. HTML define los campos y la forma en que deben enviarse, pero el procesamiento requiere lógica adicional. Más adelante veremos cómo trabajar con estos datos utilizando JavaScript y, posteriormente, un backend.

Paso 10: contenido complementario

Podemos agregar información secundaria utilizando aside.

<aside>

    <h2>Actualmente estudiando</h2>

    <p>
        Mi próximo objetivo es aprender
        CSS y comenzar a diseñar
        visualmente esta página.
    </p>

</aside>

Paso 11: pie de página

<footer>

    <p>
        Página creada como proyecto
        de aprendizaje de HTML.
    </p>

    <p>
        Aprendiendo en
        <a href="https://clubprogramador.com/">
            Club Programador
        </a>
    </p>

</footer>

Proyecto completo

Ahora podemos unir todas las partes en un único archivo.

<!DOCTYPE html>
<html lang="es">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>Mi portfolio de programador</title>

</head>

<body>

    <header>

        <h1>Juan Pérez</h1>

        <p>
            Estudiante de programación
            y desarrollo web
        </p>

    </header>

    <nav>

        <a href="#sobre-mi">Sobre mí</a>
        <a href="#tecnologias">Tecnologías</a>
        <a href="#proyectos">Proyectos</a>
        <a href="#cursos">Cursos</a>
        <a href="#contacto">Contacto</a>

    </nav>

    <main>

        <section id="sobre-mi">

            <h2>Sobre mí</h2>

            <img
                src="imagenes/perfil.jpg"
                alt="Foto de perfil de Juan Pérez"
                width="200"
            >

            <p>
                Estoy aprendiendo programación
                y desarrollo web.
            </p>

            <p>
                Comencé estudiando lógica
                de programación y actualmente
                estoy aprendiendo HTML.
            </p>

        </section>

        <section id="tecnologias">

            <h2>
                Tecnologías que estoy aprendiendo
            </h2>

            <ul>
                <li>PSeInt</li>
                <li>Python</li>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>

        </section>

        <section id="proyectos">

            <h2>Mis proyectos</h2>

            <article>

                <h3>
                    Sistema de gestión de alumnos
                </h3>

                <p>
                    Proyecto realizado en Python
                    para practicar listas,
                    funciones y búsqueda de datos.
                </p>

                <a href="#">
                    Ver proyecto
                </a>

            </article>

            <article>

                <h3>
                    Mi primera página web
                </h3>

                <p>
                    Página creada utilizando
                    HTML semántico.
                </p>

                <a href="#">
                    Ver proyecto
                </a>

            </article>

        </section>

        <section id="cursos">

            <h2>
                Cursos y contenidos completados
            </h2>

            <table>

                <thead>

                    <tr>
                        <th>Curso</th>
                        <th>Estado</th>
                    </tr>

                </thead>

                <tbody>

                    <tr>
                        <td>PSeInt</td>
                        <td>Completado</td>
                    </tr>

                    <tr>
                        <td>Python</td>
                        <td>Completado</td>
                    </tr>

                    <tr>
                        <td>HTML</td>
                        <td>En curso</td>
                    </tr>

                </tbody>

            </table>

        </section>

        <section id="contacto">

            <h2>Contacto</h2>

            <form
                action="/contacto"
                method="post"
            >

                <p>

                    <label for="nombre">
                        Nombre
                    </label><br>

                    <input
                        type="text"
                        id="nombre"
                        name="nombre"
                        required
                    >

                </p>

                <p>

                    <label for="email">
                        Correo electrónico
                    </label><br>

                    <input
                        type="email"
                        id="email"
                        name="email"
                        required
                    >

                </p>

                <p>

                    <label for="motivo">
                        Motivo
                    </label><br>

                    <select
                        id="motivo"
                        name="motivo"
                        required
                    >

                        <option value="">
                            Seleccione una opción
                        </option>

                        <option value="consulta">
                            Consulta
                        </option>

                        <option value="proyecto">
                            Proyecto
                        </option>

                        <option value="otro">
                            Otro
                        </option>

                    </select>

                </p>

                <p>

                    <label for="mensaje">
                        Mensaje
                    </label><br>

                    <textarea
                        id="mensaje"
                        name="mensaje"
                        rows="6"
                        required
                    ></textarea>

                </p>

                <button type="submit">
                    Enviar
                </button>

            </form>

        </section>

        <aside>

            <h2>Actualmente estudiando</h2>

            <p>
                Mi próximo objetivo es aprender
                CSS y comenzar a diseñar
                visualmente esta página.
            </p>

        </aside>

    </main>

    <footer>

        <p>
            Página creada como proyecto
            de aprendizaje de HTML.
        </p>

        <p>
            Aprendiendo en
            <a href="https://clubprogramador.com/">
                Club Programador
            </a>
        </p>

    </footer>

</body>

</html>

Qué conceptos utilizamos

En este proyecto aparecen prácticamente todos los conceptos principales de esta introducción a HTML:

estructura del documento;
head y body;
encabezados;
párrafos;
enlaces;
imágenes;
listas;
tablas;
formularios;
id y atributos;
HTML semántico;
accesibilidad básica;
navegación mediante anclas.

Ejercicio: personalizá el proyecto

Antes de continuar, probá modificar la página por tu cuenta.

Algunas ideas:

cambiar el nombre y la descripción;
agregar otra tecnología;
crear un tercer proyecto;
agregar otro curso a la tabla;
incorporar enlaces a redes profesionales;
agregar una nueva sección;
modificar el formulario de contacto;
crear una segunda página HTML y enlazarla desde el menú.

Errores comunes a revisar

olvidar cerrar etiquetas que requieren cierre;
repetir el mismo id;
usar encabezados sin respetar una jerarquía lógica;
olvidar el atributo alt en imágenes;
crear controles de formulario sin name;
utilizar elementos semánticos únicamente por su apariencia;
pensar que el formulario ya procesa los datos;
intentar resolver el diseño visual utilizando únicamente HTML.

HTML nos dio la estructura. Ahora necesitamos estilos

Con HTML ya podemos construir una página completa, organizada y semánticamente correcta.

Sin embargo, todavía no controlamos realmente su presentación.

Ahí entra CSS.

CSS significa Cascading Style Sheets —hojas de estilo en cascada— y se utiliza para definir cómo se ve una página HTML.

Con CSS podremos trabajar con:

colores;
tipografías;
tamaños;
márgenes y espacios;
bordes;
fondos;
alineación;
columnas;
diseños adaptables a celulares y computadoras;
y mucho más.

La idea que debemos recordar es:

HTML  -> estructura y contenido
CSS   -> estilos y presentacion
JavaScript -> comportamiento e interaccion

Seguí aprendiendo HTML

La guía anterior de esta serie es:

HTML semántico: header, nav, main, section, article, aside y footer

Con este proyecto cerramos la introducción a HTML. El próximo paso es:

Introducción a CSS: qué es, cómo funciona y cómo aplicar estilos a una página HTML →

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender desarrollo web, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

HTML semántico: header, nav, main, section, article, aside y footer

Aprendé HTML semántico con header, nav, main, section, article, aside y footer. Diferencias, buenas prácticas y ejemplo completo de una página de blog.

Hasta ahora vimos la estructura básica de un documento HTML, las etiquetas esenciales y cómo crear formularios. El siguiente paso es aprender a organizar una página de forma más clara utilizando HTML semántico.

Recordatorio: HTML no es un lenguaje de programación. Los elementos semánticos no agregan lógica: describen qué función cumple cada parte del contenido dentro de la página.

¿Qué significa HTML semántico?

La semántica consiste en utilizar elementos cuyo nombre expresa el significado o la función del contenido que contienen.

Por ejemplo, estas dos estructuras pueden verse de forma similar en un navegador:

<div>
    <div>Club Programador</div>
    <div>Inicio | Cursos | Contacto</div>
    <div>Contenido principal</div>
    <div>Pie de pagina</div>
</div>

<header>
    <h1>Club Programador</h1>
</header>

<nav>
    Inicio | Cursos | Contacto
</nav>

<main>
    Contenido principal
</main>

<footer>
    Pie de pagina
</footer>

La segunda versión comunica mucho mejor qué representa cada parte del documento.

¿Por qué usar HTML semántico?

Utilizar elementos semánticos ayuda a:

organizar mejor el código;
hacer que el documento sea más fácil de leer y mantener;
mejorar la accesibilidad;
dar contexto a navegadores y tecnologías de asistencia;
facilitar la interpretación de la estructura por parte de motores de búsqueda;
reducir el uso innecesario de elementos genéricos.

header

header representa contenido introductorio o de encabezado.

<header>
    <h1>Club Programador</h1>
    <p>Aprender programacion paso a paso</p>
</header>

No necesariamente existe un único header en toda la página. Un artículo o una sección también pueden tener su propio encabezado.

<article>
    <header>
        <h2>Introduccion a HTML</h2>
        <p>Publicado el 24 de septiembre</p>
    </header>

    <p>Contenido del articulo...</p>
</article>

nav

nav representa una sección de navegación importante.

<nav>
    <a href="index.html">Inicio</a>
    <a href="cursos.html">Cursos</a>
    <a href="contacto.html">Contacto</a>
</nav>

No es necesario colocar dentro de nav absolutamente todos los enlaces de la página. Se utiliza principalmente para grupos de enlaces de navegación relevantes.

main

main identifica el contenido principal del documento.

<main>
    <h1>Curso de HTML</h1>
    <p>Contenido principal de la pagina.</p>
</main>

El contenido que se repite en muchas páginas, como una navegación global o un pie de página, normalmente queda fuera de main.

section

section agrupa contenido relacionado que forma una sección temática del documento.

<section>
    <h2>Cursos disponibles</h2>

    <p>
        En esta seccion vas a encontrar
        distintos cursos de programacion.
    </p>
</section>

Una buena práctica es que una sección tenga normalmente un encabezado que explique de qué trata.

article

article representa contenido que tiene sentido por sí mismo y podría distribuirse o reutilizarse de manera independiente.

Ejemplos habituales:

una publicación de blog;
una noticia;
una entrada de foro;
una reseña;
una ficha de contenido independiente.

<article>
    <h2>Introduccion a Python</h2>

    <p>
        Python es un lenguaje de programacion
        muy utilizado...
    </p>
</article>

section o article: ¿cuál usar?

Una forma simple de pensarlo es:

section: agrupa una parte temática de una página;
article: contiene una unidad de contenido con sentido independiente.

Por ejemplo, una página de noticias podría contener:

<main>

    <section>

        <h1>Ultimas noticias</h1>

        <article>
            <h2>Noticia 1</h2>
            <p>Contenido...</p>
        </article>

        <article>
            <h2>Noticia 2</h2>
            <p>Contenido...</p>
        </article>

    </section>

</main>

aside

aside representa contenido relacionado de forma secundaria con el contenido principal.

<aside>
    <h2>Articulos relacionados</h2>

    <ul>
        <li>Introduccion a HTML</li>
        <li>Formularios en HTML</li>
    </ul>
</aside>

Puede utilizarse, por ejemplo, para:

enlaces relacionados;
información complementaria;
biografías de autor;
bloques laterales;
contenido secundario.

footer

footer representa el pie de una página o de una sección.

<footer>
    <p>© Club Programador</p>
    <a href="contacto.html">Contacto</a>
</footer>

También puede existir un footer dentro de un article.

<article>

    <h2>Guia de HTML</h2>

    <p>Contenido del articulo...</p>

    <footer>
        <p>Autor: Club Programador</p>
    </footer>

</article>

¿Y div?

div sigue siendo completamente válido.

Es un contenedor genérico que podemos utilizar cuando ningún elemento semántico describe adecuadamente el contenido.

<div class="tarjeta">
    <h2>Curso de Python</h2>
    <p>20 ejercicios resueltos.</p>
</div>

El problema no es utilizar div, sino utilizarlo para absolutamente todo cuando existen elementos con un significado más preciso.

Ejemplo poco semántico

<div class="cabecera">
    <div class="titulo">Mi sitio</div>
</div>

<div class="menu">
    ...
</div>

<div class="contenido">
    ...
</div>

<div class="pie">
    ...
</div>

La misma estructura con semántica

<header>
    <h1>Mi sitio</h1>
</header>

<nav>
    ...
</nav>

<main>
    ...
</main>

<footer>
    ...
</footer>

La estructura resulta más comprensible incluso antes de aplicar CSS.

Los elementos semánticos no determinan el diseño

Un punto importante es que header, main, aside o footer describen la función del contenido, pero no obligan a que tenga un diseño específico.

Por ejemplo, un aside no tiene que aparecer necesariamente a la derecha de la pantalla.

La posición, los colores, los tamaños y la distribución visual se definirán más adelante con CSS.

Semántica y accesibilidad

Los elementos semánticos ayudan a que las tecnologías de asistencia comprendan mejor la estructura de una página.

Por ejemplo, pueden distinguir con mayor claridad:

dónde comienza la navegación;
cuál es el contenido principal;
qué partes son artículos;
qué información es complementaria;
dónde se encuentra el pie del documento.

La semántica no resuelve por sí sola todos los aspectos de accesibilidad, pero constituye una base importante.

Semántica y SEO

Una estructura clara también facilita que los motores de búsqueda interpreten el contenido y sus relaciones.

Esto no significa que utilizar una determinada etiqueta garantice mejores posiciones. El SEO depende de muchos factores, pero un documento bien estructurado facilita la comprensión del contenido.

Ejemplo completo: página de blog semántica

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>Mi blog de programacion</title>
</head>

<body>

    <header>

        <h1>Mi blog de programacion</h1>

        <p>
            Aprendiendo desarrollo web
            paso a paso
        </p>

    </header>

    <nav>

        <a href="index.html">Inicio</a>
        <a href="articulos.html">Articulos</a>
        <a href="contacto.html">Contacto</a>

    </nav>

    <main>

        <section>

            <h2>Ultimos articulos</h2>

            <article>

                <header>
                    <h3>Introduccion a HTML</h3>
                    <p>Publicado el 24 de septiembre</p>
                </header>

                <p>
                    En esta guia aprendemos
                    los fundamentos de HTML.
                </p>

                <a href="html.html">
                    Leer articulo
                </a>

                <footer>
                    <p>Categoria: HTML</p>
                </footer>

            </article>

            <article>

                <header>
                    <h3>Introduccion a Python</h3>
                </header>

                <p>
                    Primeros pasos con Python.
                </p>

                <a href="python.html">
                    Leer articulo
                </a>

            </article>

        </section>

        <aside>

            <h2>Contenido recomendado</h2>

            <ul>
                <li>
                    <a href="formularios.html">
                        Formularios HTML
                    </a>
                </li>

                <li>
                    <a href="python.html">
                        Aprender Python
                    </a>
                </li>
            </ul>

        </aside>

    </main>

    <footer>

        <p>
            © Club Programador
        </p>

    </footer>

</body>

</html>

Cómo pensar una estructura antes de escribir HTML

Antes de llenar una página de etiquetas, podemos preguntarnos:

¿cuál es el contenido principal?
¿existe una navegación principal?
¿hay secciones temáticas?
¿alguna parte tiene sentido como contenido independiente?
¿existe información secundaria?
¿qué contenido corresponde al encabezado y al pie?

Estas preguntas ayudan a elegir etiquetas por su significado y no simplemente por cómo queremos que se vea la página.

Errores comunes

utilizar div para absolutamente todo;
usar elementos semánticos solo por su apariencia visual;
confundir section con article;
pensar que aside significa obligatoriamente “columna derecha”;
colocar todo dentro de main, incluso navegación y pie global;
crear secciones sin una estructura de encabezados clara;
creer que HTML semántico reemplaza a CSS;
pensar que utilizar etiquetas semánticas agrega lógica de programación.

Qué aprendimos

En esta guía vimos cómo utilizar:

header para encabezados;
nav para navegación importante;
main para el contenido principal;
section para secciones temáticas;
article para contenido independiente;
aside para información complementaria;
footer para pies de página o sección;
div cuando necesitamos un contenedor genérico.

La idea central es simple: elegir los elementos por el significado del contenido, no solamente por cómo queremos que se vea.

Seguí aprendiendo HTML

La guía anterior de esta serie es:

Formularios en HTML: input, label, select, textarea y validaciones básicas

En la próxima publicación integramos todo lo aprendido en un proyecto final de HTML:

Proyecto final HTML: crear una página web completa desde cero →

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender desarrollo web, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

Formularios en HTML: input, label, select, textarea y validaciones básicas

Aprendé a crear formularios en HTML con input, label, select, textarea, button, GET, POST y validaciones básicas del navegador.

Los formularios son una de las formas principales de recibir datos de los usuarios en una página web. Con ellos podemos construir registros, búsquedas, formularios de contacto, encuestas, filtros y muchas otras interfaces.

Importante: HTML no procesa por sí solo los datos del formulario ni ejecuta lógica de negocio. Su función es definir la estructura de los campos y algunas reglas básicas. El procesamiento real suele realizarse con JavaScript y/o un backend.

¿Qué es un formulario HTML?

Un formulario agrupa controles que permiten al usuario ingresar o seleccionar información.

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

    <button type="submit">Enviar</button>
</form>

La etiqueta form

Todo formulario comienza normalmente con <form>.

<form action="/procesar" method="post">
    ...
</form>

Dos atributos importantes son:

action: indica a qué dirección se enviarán los datos;
method: indica el método HTTP utilizado para enviarlos.

GET y POST

Los dos métodos más habituales en formularios HTML son GET y POST.

GET

Los datos suelen formar parte de la URL.

<form action="/buscar" method="get">
    <input type="text" name="q">
    <button type="submit">Buscar</button>
</form>

Un resultado conceptual podría ser:

/buscar?q=python

GET es habitual para búsquedas, filtros y consultas que no modifican datos.

POST

POST envía los datos dentro de la solicitud HTTP y suele utilizarse cuando enviamos información para ser procesada o almacenada.

<form action="/registro" method="post">
    ...
</form>

La elección entre GET y POST depende del propósito de la operación. No debe pensarse que POST convierte automáticamente un formulario en seguro: la seguridad depende también de HTTPS, validaciones, autenticación y del procesamiento del servidor.

label: describir correctamente un campo

La etiqueta label indica qué representa un control.

<label for="email">Correo electrónico</label>
<input type="email" id="email" name="email">

El atributo for debe coincidir con el id del campo.

Esto mejora la usabilidad y la accesibilidad, ya que al hacer clic en el texto del label se activa el control asociado.

input: el control más utilizado

La etiqueta input puede adoptar distintos comportamientos mediante el atributo type.

Input de texto

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

Sirve para ingresar texto corto.

Correo electrónico

<input type="email" name="email">

El navegador puede comprobar que el valor tenga una estructura compatible con un correo electrónico.

Contraseña

<input type="password" name="clave">

El navegador oculta visualmente los caracteres mientras se escriben.

Esto no cifra la contraseña por sí mismo. La transmisión segura depende, entre otras cosas, de utilizar HTTPS y de un tratamiento correcto en el servidor.

Números

<input type="number" name="edad">

Podemos agregar límites:

<input
    type="number"
    name="edad"
    min="18"
    max="120"
>

Fecha

<input type="date" name="fecha_nacimiento">

Radio buttons

Los botones de opción permiten elegir una sola alternativa dentro de un grupo.

<input
    type="radio"
    id="basico"
    name="nivel"
    value="basico"
>
<label for="basico">Básico</label>

<input
    type="radio"
    id="intermedio"
    name="nivel"
    value="intermedio"
>
<label for="intermedio">Intermedio</label>

Todos los elementos del grupo comparten el mismo atributo name.

Checkbox

Un checkbox representa normalmente una opción independiente que puede estar marcada o no.

<input
    type="checkbox"
    id="terminos"
    name="terminos"
    value="aceptados"
>

<label for="terminos">
    Acepto los términos
</label>

Archivos

<input type="file" name="archivo">

Permite al usuario seleccionar un archivo desde su dispositivo.

Cuando un formulario realmente envía archivos al servidor suelen ser necesarias configuraciones adicionales, como enctype="multipart/form-data".

Botón de envío

<input type="submit" value="Enviar">

También podemos utilizar:

<button type="submit">Enviar</button>

El atributo name

name es especialmente importante porque identifica el dato cuando el formulario es enviado.

<input
    type="text"
    id="nombre"
    name="nombre"
>

Podemos pensar conceptualmente en el envío como:

nombre=Ana

El atributo value

value representa el valor asociado al control.

<input
    type="radio"
    name="lenguaje"
    value="python"
>

Si esa opción está seleccionada, el valor enviado será python.

Placeholder

<input
    type="text"
    name="nombre"
    placeholder="Ejemplo: Ana Pérez"
>

El placeholder ofrece una ayuda visual temporal, pero no debería reemplazar al label.

Campos obligatorios con required

<input
    type="email"
    name="email"
    required
>

El navegador evitará normalmente el envío mientras el campo requerido esté vacío o no cumpla las restricciones básicas de su tipo.

minlength y maxlength

<input
    type="text"
    name="usuario"
    minlength="4"
    maxlength="20"
>

min y max

<input
    type="number"
    name="cantidad"
    min="1"
    max="10"
>

select y option

Para seleccionar una alternativa de una lista podemos utilizar select.

<label for="pais">País</label>

<select id="pais" name="pais">
    <option value="ar">Argentina</option>
    <option value="uy">Uruguay</option>
    <option value="cl">Chile</option>
</select>

Una opción inicial

<select name="lenguaje" required>
    <option value="">Seleccione un lenguaje</option>
    <option value="python">Python</option>
    <option value="javascript">JavaScript</option>
</select>

textarea

Para textos más largos utilizamos textarea.

<label for="mensaje">Mensaje</label>

<textarea
    id="mensaje"
    name="mensaje"
    rows="5"
    cols="40"
></textarea>

button

La etiqueta button puede representar diferentes acciones.

<button type="submit">Enviar</button>
<button type="reset">Limpiar</button>
<button type="button">Otro botón</button>

type="button" no envía el formulario por sí solo. Más adelante, con JavaScript, podremos asociarle comportamiento.

fieldset y legend

Cuando un formulario tiene varios grupos de campos relacionados, podemos organizarlos semánticamente.

<fieldset>

    <legend>Datos personales</legend>

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

    <label for="edad">Edad</label>
    <input
        type="number"
        id="edad"
        name="edad"
    >

</fieldset>

Validación nativa de HTML

HTML permite declarar algunas reglas de validación.

<input
    type="email"
    name="email"
    required
>

<input
    type="number"
    name="edad"
    min="18"
    max="120"
    required
>

El navegador puede utilizar estas reglas para ayudar al usuario antes del envío.

HTML no reemplaza la validación del servidor

Regla fundamental: nunca debemos confiar únicamente en la validación HTML.

Las restricciones del navegador pueden evitar errores accidentales, pero un usuario o programa puede enviar solicitudes sin utilizar nuestro formulario.

Por eso, si un backend recibe:

un correo electrónico;
una edad;
una contraseña;
un archivo;
cualquier otro dato;

debe validar nuevamente esa información en el servidor.

Ejemplo completo: formulario de registro

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registro de estudiante</title>
</head>

<body>

    <h1>Registro de estudiante</h1>

    <form action="/registro" method="post">

        <fieldset>

            <legend>Datos personales</legend>

            <p>
                <label for="nombre">Nombre</label><br>

                <input
                    type="text"
                    id="nombre"
                    name="nombre"
                    minlength="2"
                    maxlength="60"
                    required
                >
            </p>

            <p>
                <label for="email">Correo electrónico</label><br>

                <input
                    type="email"
                    id="email"
                    name="email"
                    required
                >
            </p>

            <p>
                <label for="edad">Edad</label><br>

                <input
                    type="number"
                    id="edad"
                    name="edad"
                    min="12"
                    max="120"
                    required
                >
            </p>

        </fieldset>

        <fieldset>

            <legend>Curso</legend>

            <p>
                <label for="lenguaje">
                    Lenguaje que desea aprender
                </label><br>

                <select
                    id="lenguaje"
                    name="lenguaje"
                    required
                >
                    <option value="">
                        Seleccione una opción
                    </option>

                    <option value="python">
                        Python
                    </option>

                    <option value="javascript">
                        JavaScript
                    </option>

                    <option value="html-css">
                        HTML y CSS
                    </option>
                </select>
            </p>

            <p>
                Nivel actual:
            </p>

            <input
                type="radio"
                id="inicial"
                name="nivel"
                value="inicial"
                required
            >

            <label for="inicial">Inicial</label>

            <input
                type="radio"
                id="intermedio"
                name="nivel"
                value="intermedio"
            >

            <label for="intermedio">
                Intermedio
            </label>

        </fieldset>

        <p>
            <label for="comentarios">
                Comentarios
            </label><br>

            <textarea
                id="comentarios"
                name="comentarios"
                rows="5"
            ></textarea>
        </p>

        <p>
            <input
                type="checkbox"
                id="terminos"
                name="terminos"
                value="aceptados"
                required
            >

            <label for="terminos">
                Acepto los términos y condiciones
            </label>
        </p>

        <button type="submit">
            Registrarme
        </button>

    </form>

</body>

</html>

¿Qué ocurre al presionar Enviar?

Cuando el usuario envía el formulario, el navegador reúne los controles que tienen un atributo name y prepara sus valores para enviarlos según el método y destino configurados.

HTML define esa estructura, pero para que exista un registro real necesitamos un sistema capaz de recibir y procesar los datos.

Por ejemplo, un backend desarrollado con PHP, Python, Java, Node.js u otra tecnología.

Más adelante, cuando avancemos en la ruta de desarrollo web, veremos cómo tomar los datos enviados por un formulario, validarlos y procesarlos realmente. Primero lo abordaremos desde JavaScript para entender la interacción en el navegador y luego podremos avanzar hacia el procesamiento del lado del servidor con un backend.

Accesibilidad en formularios

Algunas buenas prácticas básicas son:

utilizar un label descriptivo para cada control;
relacionar for con el id correspondiente;
no depender únicamente del placeholder;
agrupar opciones relacionadas con fieldset y legend cuando corresponda;
usar el tipo de input adecuado;
dar instrucciones claras cuando un dato tiene requisitos especiales.

Errores comunes

crear campos sin name y esperar que el dato sea enviado;
utilizar el mismo id en varios elementos;
usar placeholder como único reemplazo del label;
olvidar que varios radio buttons deben compartir el mismo name;
pensar que required reemplaza la validación del backend;
usar POST creyendo que los datos quedan automáticamente protegidos;
no validar correctamente archivos enviados por el usuario;
utilizar un button sin comprender su tipo.

Qué aprendimos

Con los formularios ya podemos construir interfaces que permitan al usuario ingresar información.

Trabajamos con:

form;
action y method;
label;
diferentes tipos de input;
select y option;
textarea;
button;
fieldset y legend;
validaciones básicas del navegador;
accesibilidad;
diferencia entre estructurar un formulario y procesar realmente sus datos.

Seguí aprendiendo HTML

La guía anterior de esta serie es:

Etiquetas HTML esenciales: textos, enlaces, imágenes, listas y tablas

El próximo paso es profundizar en HTML semántico:

HTML semántico: header, nav, main, section, article, aside y footer →

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender desarrollo web, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

Etiquetas HTML esenciales: textos, enlaces, imágenes, listas y tablas

Aprendé las etiquetas HTML esenciales para textos, enlaces, imágenes, listas y tablas, con ejemplos y una página completa paso a paso.

Ahora que ya entendemos qué es HTML y cómo se estructura una página web, el siguiente paso es conocer las etiquetas más utilizadas para construir contenido real.

En esta guía vamos a trabajar con textos, enlaces, imágenes, listas y tablas, explicando no solo cómo se escriben, sino también cuándo conviene usar cada elemento.

Recordatorio: HTML sigue sin ser un lenguaje de programación. Estas etiquetas no ejecutan lógica: describen la estructura y el significado del contenido que el navegador debe mostrar.

Antes de empezar: etiqueta, elemento y atributo

Conviene distinguir tres conceptos:

<a href="https://clubprogramador.com/">Club Programador</a>

Etiqueta: <a>.
Elemento: todo el conjunto, incluyendo apertura, contenido y cierre.
Atributo: href, que agrega información al elemento.

Elementos de bloque y contenido en línea

Sin entrar todavía en detalles de CSS, podemos pensar que algunos elementos suelen ocupar su propio bloque visual y otros forman parte de una línea de texto.

Por ejemplo:

<h1>Titulo principal</h1>
<p>Este es un parrafo.</p>

son elementos que normalmente aparecen como bloques.

En cambio:

<strong>texto importante</strong>
<em>texto enfatizado</em>
<a href="#">un enlace</a>

suelen formar parte del contenido de una línea.

Más adelante CSS podrá modificar completamente su presentación.

Títulos: h1 a h6

HTML ofrece seis niveles de encabezado:

<h1>Titulo principal</h1>
<h2>Seccion principal</h2>
<h3>Subseccion</h3>
<h4>Nivel 4</h4>
<h5>Nivel 5</h5>
<h6>Nivel 6</h6>

No conviene elegir un encabezado por el tamaño visual que tenga por defecto. Lo correcto es usarlo según la jerarquía del contenido.

Párrafos

<p>Este es un parrafo de texto.</p>

La etiqueta p representa un párrafo.

Si tenemos dos ideas separadas, lo normal es usar dos párrafos:

<p>Primer parrafo.</p>
<p>Segundo parrafo.</p>

Saltos de línea con br

La etiqueta br genera un salto de línea:

Club Programador<br>
Aprender programacion paso a paso

No conviene utilizar muchos br para crear espacios visuales. Ese trabajo pertenece a CSS.

strong y em

HTML permite expresar importancia y énfasis semántico.

<p>
    Este concepto es <strong>muy importante</strong>.
</p>

<p>
    Queremos <em>enfatizar</em> esta palabra.
</p>

strong representa importancia y em énfasis.

Aunque los navegadores suelen mostrarlos en negrita y cursiva, su significado no es puramente visual.

Enlaces con a

Los enlaces son una de las bases del concepto de hipertexto.

<a href="https://clubprogramador.com/">
    Visitar Club Programador
</a>

El atributo href indica el destino.

Enlaces externos

<a href="https://www.python.org/">
    Sitio oficial de Python
</a>

Abrir un enlace en otra pestaña

<a
    href="https://www.python.org/"
    target="_blank"
    rel="noopener noreferrer"
>
    Python
</a>

target="_blank" abre el enlace en otra pestaña.

Cuando usamos ese comportamiento, rel="noopener noreferrer" es una práctica habitual de seguridad y privacidad.

Enlaces a otra página del mismo sitio

Si tenemos:

index.html
contacto.html

podemos crear:

<a href="contacto.html">Contacto</a>

Enlaces a una sección de la misma página

Primero identificamos una sección:

<h2 id="contacto">Contacto</h2>

Luego creamos un enlace:

<a href="#contacto">Ir a contacto</a>

Este uso de id será importante también cuando lleguemos a CSS y JavaScript.

Imágenes con img

La etiqueta img permite insertar imágenes:

<img
    src="imagenes/programacion.jpg"
    alt="Persona programando frente a una computadora"
>

El atributo src

src indica dónde se encuentra el archivo de imagen.

<img src="logo.png" alt="Logo">

El atributo alt

alt describe el contenido o función de la imagen.

Es especialmente importante para:

accesibilidad;
lectores de pantalla;
casos donde la imagen no puede cargarse;
comprender mejor el contenido del documento.

width y height

También podemos indicar dimensiones:

<img
    src="logo.png"
    alt="Logo de Club Programador"
    width="200"
    height="200"
>

Más adelante veremos que CSS suele encargarse de la presentación y del comportamiento responsive.

Rutas relativas y absolutas

Una ruta absoluta contiene una dirección completa:

https://ejemplo.com/imagenes/logo.png

Una ruta relativa depende de la ubicación del documento actual:

imagenes/logo.png

Ejemplo de proyecto:

mi-sitio/
|
|-- index.html
|-- contacto.html
|
|-- imagenes/
    |-- logo.png

Desde index.html podemos escribir:

<img src="imagenes/logo.png" alt="Logo">

Listas desordenadas

Utilizamos ul cuando el orden de los elementos no es esencial.

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Listas ordenadas

Utilizamos ol cuando la secuencia tiene importancia.

<ol>
    <li>Aprender HTML</li>
    <li>Aprender CSS</li>
    <li>Aprender JavaScript</li>
</ol>

Listas anidadas

<ul>
    <li>
        Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>

    <li>
        Backend
        <ul>
            <li>PHP</li>
            <li>Python</li>
        </ul>
    </li>
</ul>

Tablas en HTML

Las tablas sirven para representar datos que naturalmente tienen filas y columnas.

<table>
    <tr>
        <th>Lenguaje</th>
        <th>Nivel</th>
    </tr>

    <tr>
        <td>HTML</td>
        <td>Inicial</td>
    </tr>

    <tr>
        <td>Python</td>
        <td>Intermedio</td>
    </tr>
</table>

Elementos principales de una tabla

table: contiene toda la tabla;
tr: representa una fila;
th: celda de encabezado;
td: celda de datos.

thead y tbody

Una estructura más clara puede separar encabezado y cuerpo:

<table>

    <thead>
        <tr>
            <th>Curso</th>
            <th>Estado</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>HTML</td>
            <td>En curso</td>
        </tr>

        <tr>
            <td>Python</td>
            <td>Completado</td>
        </tr>
    </tbody>

</table>

¿Cuándo usar una tabla?

Una tabla tiene sentido para datos tabulares:

precios;
resultados;
horarios;
comparaciones;
estadísticas;
listados con columnas relacionadas.

No conviene utilizar tablas para construir el diseño general de una página. Para eso utilizaremos HTML semántico y CSS.

Entidades HTML

Algunos caracteres tienen un significado especial dentro del propio HTML.

Por ejemplo, para mostrar ciertos símbolos podemos utilizar entidades:

&lt;   muestra <
&gt;   muestra >
&amp;  muestra &
&copy; muestra ©

Comentarios

<!-- Menu principal -->

<nav>
    ...
</nav>

Los comentarios permiten dejar anotaciones en el código sin mostrarlas como contenido de la página.

Ejemplo completo: página de presentación

Vamos a combinar varios de los elementos anteriores.

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi perfil de programador</title>
</head>

<body>

    <header>
        <h1>Mi perfil de programador</h1>

        <nav>
            <a href="#sobre-mi">Sobre mi</a>
            <a href="#tecnologias">Tecnologias</a>
            <a href="#cursos">Cursos</a>
        </nav>
    </header>

    <main>

        <section id="sobre-mi">

            <h2>Sobre mi</h2>

            <img
                src="imagenes/perfil.jpg"
                alt="Foto de perfil"
                width="180"
            >

            <p>
                Estoy aprendiendo desarrollo web
                y programacion.
            </p>

        </section>

        <section id="tecnologias">

            <h2>Tecnologias que estoy aprendiendo</h2>

            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
                <li>Python</li>
            </ul>

        </section>

        <section id="cursos">

            <h2>Mis cursos</h2>

            <table>

                <thead>
                    <tr>
                        <th>Curso</th>
                        <th>Estado</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>Python</td>
                        <td>Completado</td>
                    </tr>

                    <tr>
                        <td>HTML</td>
                        <td>En curso</td>
                    </tr>
                </tbody>

            </table>

        </section>

    </main>

    <footer>
        <p>
            Aprendiendo en
            <a href="https://clubprogramador.com/">
                Club Programador
            </a>
        </p>
    </footer>

</body>

</html>

Errores comunes

usar encabezados solo por su tamaño visual;
usar br repetidamente para crear espacios;
olvidar el atributo alt de las imágenes;
confundir rutas relativas y absolutas;
utilizar tablas para diseñar toda la página;
colocar elementos de una lista fuera de ul u ol;
repetir el mismo id para distintos elementos;
pensar que HTML controla la lógica o el comportamiento de estos elementos.

Qué aprendimos

Con estas etiquetas ya podemos construir documentos bastante completos:

organizar títulos y párrafos;
crear enlaces;
insertar imágenes;
usar listas;
representar datos en tablas;
crear navegación interna;
mantener una estructura semántica.

Seguí aprendiendo HTML

Si todavía no viste los fundamentos, empezá por:

Introducción a HTML: qué es, cómo funciona y estructura básica de una página web

El próximo paso es aprender a construir formularios en HTML utilizando etiquetas como form, input, label, select, textarea y button:

Formularios en HTML: input, label, select, textarea y validaciones básicas →

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender desarrollo web, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

Introducción a HTML: qué es, cómo funciona y estructura básica de una página web

Aprendé qué es HTML, por qué no es un lenguaje de programación, cómo se estructura una página web y cómo crear tu primer documento HTML.

HTML es la base de prácticamente todas las páginas web. Antes de aprender CSS o JavaScript, conviene entender cómo se estructura un documento web y qué función cumple cada parte.

Importante: HTML no es un lenguaje de programación. Es un lenguaje de marcado. Su función principal es describir la estructura y el significado del contenido de una página web.

¿Qué significa HTML?

HTML significa HyperText Markup Language, es decir, Lenguaje de Marcado de Hipertexto.

Podemos separar el nombre en dos ideas:

HyperText: contenido conectado mediante enlaces.
Markup Language: lenguaje que utiliza marcas o etiquetas para describir la estructura de un documento.

¿Por qué HTML no es un lenguaje de programación?

Un lenguaje de programación permite expresar lógica, realizar cálculos, tomar decisiones y ejecutar algoritmos.

Por ejemplo, en Python podemos escribir:

edad = 20

if edad >= 18:
    print("Mayor de edad")

En ese código existe una condición y el programa decide qué hacer.

HTML no funciona así. Un documento HTML describe contenido:

<h1>Club Programador</h1>
<p>Aprendiendo desarrollo web</p>

HTML no ejecuta un algoritmo ni toma decisiones. Le indica al navegador qué contenido existe y qué significado tiene.

Entonces, ¿para qué sirve HTML?

HTML sirve para definir la estructura de una página web.

Con HTML podemos indicar que un contenido es:

un título;
un párrafo;
un enlace;
una imagen;
una lista;
una tabla;
un formulario;
una sección;
un encabezado;
un pie de página.

HTML, CSS y JavaScript

Una forma sencilla de entender el desarrollo web es pensar en tres capas:

HTML        -> estructura
CSS         -> presentacion
JavaScript  -> comportamiento

O, visto desde una página web:

Pagina web
|
|-- HTML: que contenido existe
|-- CSS: como se ve
|-- JavaScript: como se comporta

HTML define la estructura. CSS se encarga del aspecto visual. JavaScript aporta lógica e interacción.

Más adelante, cuando lleguemos a JavaScript, esta diferencia será fundamental.

¿Qué hace el navegador con HTML?

Cuando abrimos una página, el navegador recibe un documento HTML, lo interpreta y construye una representación interna del contenido.

A partir de esa estructura, el navegador puede mostrar títulos, textos, imágenes, botones, formularios y otros elementos.

Luego CSS puede modificar su presentación y JavaScript puede interactuar con esos elementos.

¿Qué es una etiqueta HTML?

HTML utiliza etiquetas para marcar el contenido.

<p>Este es un parrafo</p>

En este ejemplo:

<p> es la etiqueta de apertura;
Este es un parrafo es el contenido;
</p> es la etiqueta de cierre.

El conjunto completo se denomina normalmente elemento HTML.

Etiquetas de apertura y cierre

Muchas etiquetas tienen apertura y cierre:

<h1>Titulo principal</h1>
<p>Un parrafo</p>
<a href="https://clubprogramador.com/">Club Programador</a>

Sin embargo, existen elementos que no contienen texto interno de la misma manera, como una imagen:

<img src="imagen.jpg" alt="Descripcion de la imagen">

¿Qué son los atributos?

Los atributos agregan información adicional a un elemento.

<a href="https://clubprogramador.com/">Visitar Club Programador</a>

En este caso:

a indica que el elemento es un enlace;
href es un atributo;
su valor indica a dónde debe dirigirse el enlace.

Elementos anidados

Los elementos HTML pueden contener otros elementos.

<div>
    <h2>Programacion</h2>
    <p>Contenido de la seccion</p>
</div>

En este ejemplo, el título y el párrafo están contenidos dentro de un div.

Estructura básica de un documento HTML

Un documento HTML moderno suele comenzar con una estructura como esta:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primera pagina</title>
</head>

<body>
    <h1>Hola mundo</h1>
    <p>Mi primera pagina web</p>
</body>

</html>

<!DOCTYPE html>

La primera línea:

<!DOCTYPE html>

indica al navegador que estamos utilizando HTML moderno.

No es una etiqueta de contenido. Es una declaración que ayuda al navegador a interpretar correctamente el documento.

La etiqueta <html>

<html lang="es">

Es el elemento raíz del documento.

El atributo lang="es" informa que el idioma principal del contenido es español.

La sección <head>

<head> contiene información sobre el documento que normalmente no aparece como contenido principal de la página.

Por ejemplo:

codificación de caracteres;
título de la pestaña;
metadatos;
referencias a archivos CSS;
otros recursos utilizados por el navegador.

Codificación UTF-8

<meta charset="UTF-8">

Esta línea permite representar correctamente caracteres como:

á é í ó ú ñ ¿ ¡

Viewport y dispositivos móviles

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Esta configuración ayuda a que la página se adapte correctamente al ancho de dispositivos móviles.

La etiqueta <title>

<title>Club Programador</title>

Define el título que normalmente vemos en la pestaña del navegador.

La sección <body>

Dentro de <body> colocamos el contenido visible de la página.

<body>
    <h1>Curso de HTML</h1>
    <p>Aprendiendo desarrollo web.</p>
</body>

Títulos

HTML dispone de seis niveles de encabezado:

<h1>Titulo principal</h1>
<h2>Titulo de seccion</h2>
<h3>Subseccion</h3>
<h4>Nivel 4</h4>
<h5>Nivel 5</h5>
<h6>Nivel 6</h6>

h1 representa el encabezado principal y los demás niveles permiten organizar jerárquicamente el contenido.

Párrafos

<p>Este es un parrafo.</p>

La etiqueta p representa un párrafo de texto.

Enlaces

<a href="https://clubprogramador.com/">Club Programador</a>

La etiqueta a permite crear enlaces.

Imágenes

<img src="python.jpg" alt="Logo de Python">

El atributo src indica la ubicación de la imagen.

El atributo alt describe su contenido y es importante para accesibilidad y para situaciones en las que la imagen no puede cargarse.

Listas

Lista desordenada

<ul>
    <li>Python</li>
    <li>HTML</li>
    <li>JavaScript</li>
</ul>

Lista ordenada

<ol>
    <li>Aprender HTML</li>
    <li>Aprender CSS</li>
    <li>Aprender JavaScript</li>
</ol>

Comentarios en HTML

Podemos dejar anotaciones que no se muestran en la página:

<!-- Este comentario no aparece en el navegador -->

id y class

Dos atributos muy importantes son id y class.

<h1 id="titulo-principal">Club Programador</h1>

<p class="destacado">Primer parrafo</p>
<p class="destacado">Segundo parrafo</p>

Como idea inicial:

id identifica un elemento concreto;
class permite agrupar varios elementos.

Van a resultar especialmente importantes cuando trabajemos con CSS y JavaScript.

HTML semántico

HTML moderno incluye etiquetas cuyo nombre describe la función del contenido.

<header>
    <h1>Club Programador</h1>
</header>

<main>
    <article>
        <h2>Introduccion a HTML</h2>
        <p>Contenido del articulo</p>
    </article>
</main>

<footer>
    <p>Club Programador</p>
</footer>

Algunos elementos semánticos frecuentes son:

header;
nav;
main;
section;
article;
aside;
footer.

¿Por qué es importante la semántica?

No se trata solamente de que la página se vea bien.

Una estructura semántica ayuda a:

organizar mejor el documento;
hacer el código más comprensible;
mejorar la accesibilidad;
facilitar la interpretación por navegadores y herramientas;
dar una estructura más clara a los motores de búsqueda.

Cómo crear nuestra primera página HTML

No necesitamos instalar un entorno complejo.

Podemos crear un archivo llamado:

index.html

y escribir:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primera pagina</title>
</head>

<body>

    <h1>Hola, mundo</h1>

    <p>Estoy aprendiendo HTML en Club Programador.</p>

    <a href="https://clubprogramador.com/">
        Visitar Club Programador
    </a>

</body>

</html>

Guardamos el archivo y lo abrimos con un navegador.

El navegador interpreta el HTML y muestra el documento.

HTML no define cómo se ve todo

Un error habitual al comenzar es intentar utilizar HTML para resolver toda la presentación visual.

La responsabilidad principal de HTML es la estructura y el significado.

Más adelante utilizaremos CSS para definir colores, tamaños, espacios, columnas, posiciones y diseño adaptable.

HTML tampoco define la lógica de la página

HTML puede crear un botón:

<button>Guardar</button>

Pero HTML por sí solo no contiene la lógica necesaria para decidir qué debe ocurrir al presionarlo.

Cuando avancemos hacia JavaScript veremos cómo detectar ese clic y ejecutar código.

Errores comunes al comenzar con HTML

pensar que HTML es un lenguaje de programación;
olvidar cerrar etiquetas que requieren cierre;
anidar incorrectamente los elementos;
olvidar las comillas en los atributos;
confundir id con class;
usar etiquetas únicamente por su apariencia y no por su significado;
olvidar el atributo alt en imágenes;
poner toda la página dentro de elementos genéricos sin pensar en la semántica.

Qué aprendimos

En esta primera introducción vimos que:

HTML significa HyperText Markup Language;
HTML no es un lenguaje de programación;
es un lenguaje de marcado;
su función es estructurar y describir contenido;
utiliza etiquetas, elementos y atributos;
un documento se divide principalmente en head y body;
HTML trabaja junto con CSS y JavaScript;
la semántica es una parte importante de una página moderna.

Próximo paso

En la siguiente guía profundizamos en las etiquetas HTML esenciales para trabajar con textos, enlaces, imágenes, listas y tablas:

Etiquetas HTML esenciales: textos, enlaces, imágenes, listas y tablas →

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender desarrollo web, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal