Selectores CSS: etiquetas, clases, ID, descendientes y combinadores

Aprendé selectores CSS desde cero: etiquetas, clases, ID, selector universal, descendientes, hijos directos, hermanos, atributos y especificidad.

En la guía anterior aprendimos qué es CSS, cómo conectarlo con HTML y cómo escribir nuestras primeras reglas. Ahora vamos a profundizar en una de las partes más importantes: los selectores.

Los selectores permiten indicar con precisión qué elementos HTML queremos modificar.

¿Qué es un selector CSS?

Un selector identifica uno o varios elementos del documento.

Por ejemplo:

p {
    color: #333;
    font-size: 18px;
}

En esta regla, p es el selector. Significa que el estilo se aplicará a todos los párrafos.

Selector por etiqueta

Es el selector más simple.

<h2>Título de sección</h2>
<p>Primer párrafo</p>
<p>Segundo párrafo</p>

CSS:

p {
    color: blue;
}

Todos los elementos p serán azules.

Selector por clase

Las clases son una de las herramientas más utilizadas en CSS porque permiten reutilizar estilos.

<p class="destacado">
    Texto importante
</p>

<p class="destacado">
    Otro texto importante
</p>

CSS:

.destacado {
    color: #007bff;
    font-weight: bold;
}

El punto . indica que estamos seleccionando una clase.

Selector por ID

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

CSS:

#titulo-principal {
    color: #007bff;
}

El símbolo # indica un selector por id.

Class vs ID

Una diferencia práctica:

  • class: se puede reutilizar en varios elementos;
  • id: debería identificar un elemento único dentro de la página.

Para estilos, normalmente conviene utilizar clases porque son más reutilizables y flexibles.

Selector universal

El selector universal se representa con *.

* {
    box-sizing: border-box;
}

Esta regla afecta a todos los elementos.

Más adelante veremos por qué box-sizing: border-box es tan habitual cuando trabajamos con el modelo de caja.

Agrupar selectores

Podemos aplicar las mismas reglas a varios selectores separándolos con comas.

h1, h2, h3 {
    font-family: Arial, sans-serif;
}

Así evitamos repetir código.

Selector descendiente

Permite seleccionar elementos que están dentro de otros.

<section class="noticias">
    <h2>Noticias</h2>
    <p>Primera noticia</p>
</section>

<p>Texto fuera de la sección</p>

CSS:

.noticias p {
    color: green;
}

Solo los párrafos dentro de .noticias serán verdes.

Hijo directo: >

El combinador > selecciona elementos que son hijos directos.

<div class="contenedor">
    <p>Hijo directo</p>

    <section>
        <p>Descendiente, pero no hijo directo</p>
    </section>
</div>

CSS:

.contenedor > p {
    color: red;
}

Solo el primer párrafo será afectado.

Hermano adyacente: +

El combinador + selecciona el elemento inmediatamente siguiente.

<h2>Título</h2>
<p>Primer párrafo</p>
<p>Segundo párrafo</p>

CSS:

h2 + p {
    font-weight: bold;
}

Solo el primer párrafo después del h2 será afectado.

Hermanos generales: ~

El combinador ~ selecciona hermanos posteriores del mismo nivel.

h2 ~ p {
    color: #555;
}

Selectores de atributos

Podemos seleccionar elementos según la presencia o el valor de un atributo.

<input type="text">
<input type="email">
<input type="password">

CSS:

input[type="email"] {
    border: 2px solid #007bff;
}

Solo el campo de tipo email tendrá ese borde.

Seleccionar por presencia de atributo

input[required] {
    background-color: #fffbe6;
}

Esta regla afecta a todos los inputs que tengan el atributo required.

Combinar selectores

Los selectores pueden combinarse.

<p class="mensaje importante">
    Atención
</p>

CSS:

p.importante {
    color: red;
}

Esto selecciona párrafos que además tengan la clase importante.

Más de una clase

<div class="tarjeta destacada">
    Contenido
</div>

CSS:

.tarjeta.destacada {
    border: 2px solid #007bff;
}

Introducción a la especificidad

¿Qué ocurre si varias reglas intentan cambiar la misma propiedad?

Por ejemplo:

<p id="mensaje" class="destacado">
    Hola
</p>

Y CSS:

p {
    color: blue;
}

.destacado {
    color: green;
}

#mensaje {
    color: red;
}

En este ejemplo, el selector por ID tiene mayor especificidad y el texto terminará siendo rojo.

Como introducción, podemos pensar este orden aproximado:

etiqueta  <  clase  <  id

Más adelante profundizaremos en cómo se calcula realmente la especificidad.

El orden también importa

Si dos reglas tienen la misma especificidad, normalmente prevalece la que aparece más abajo.

p {
    color: blue;
}

p {
    color: green;
}

En este caso, los párrafos serán verdes.

Ejemplo práctico

HTML:

<main class="contenido">

    <article class="tarjeta destacada">

        <h2>Curso de HTML</h2>

        <p>
            Aprendé HTML desde cero.
        </p>

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

    </article>

    <article class="tarjeta">

        <h2>Curso de CSS</h2>

        <p>
            Aprendé a aplicar estilos.
        </p>

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

    </article>

</main>

CSS:

.contenido {
    font-family: Arial, sans-serif;
}
.tarjeta {
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
}
.tarjeta.destacada {
    border: 2px solid #007bff;
}
.tarjeta h2 {
    color: #007bff;
}
.boton {
    text-decoration: none;
    font-weight: bold;
}

Errores comunes

  • olvidar el punto al seleccionar una clase;
  • olvidar el # al seleccionar un id;
  • usar el mismo id en varios elementos;
  • crear selectores demasiado largos y difíciles de mantener;
  • abusar de IDs para estilos;
  • confundir descendiente con hijo directo;
  • no entender por qué una regla pierde frente a otra por especificidad;
  • repetir reglas que podrían agruparse.

Ejercicio para practicar

Partiendo de este HTML:

<section class="cursos">

    <article class="curso destacado">
        <h2>HTML</h2>
        <p>Curso inicial</p>
    </article>

    <article class="curso">
        <h2>CSS</h2>
        <p>Curso de estilos</p>
    </article>

</section>

Intentá crear reglas para:

  • cambiar el color de todos los h2 dentro de .cursos;
  • agregar un borde a todos los elementos con clase curso;
  • aplicar un estilo diferente solo a .destacado;
  • modificar únicamente los párrafos dentro de los cursos.

Qué aprendimos

  • selector por etiqueta;
  • selector por clase;
  • selector por ID;
  • selector universal;
  • agrupación de selectores;
  • descendientes;
  • hijos directos;
  • hermanos adyacentes y generales;
  • selectores de atributos;
  • combinación de clases;
  • introducción a la especificidad;
  • importancia del orden de las reglas.

Seguí aprendiendo CSS

La guía anterior es:

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

El próximo paso es estudiar uno de los conceptos fundamentales de CSS: el modelo de caja:

Modelo de caja en CSS: width, height, margin, padding, border y box-sizing →


¿Te sirvió esta guía? ☕

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

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

Aprendé CSS desde cero: qué es, cómo se conecta con HTML, selectores, colores, tipografías, márgenes, padding, bordes y primeros estilos.

Después de aprender a estructurar una página con HTML, el siguiente paso es controlar cómo se ve. Para eso utilizamos CSS.

Importante: CSS no es un lenguaje de programación. Es un lenguaje de estilos que utilizamos para definir la presentación visual de un documento HTML.

¿Qué significa CSS?

CSS significa Cascading Style Sheets, es decir, hojas de estilo en cascada.

Su función principal es definir cómo se presenta el contenido de una página:

  • colores;
  • tipografías;
  • tamaños;
  • espacios;
  • bordes;
  • fondos;
  • alineación;
  • columnas;
  • disposición de elementos;
  • diseño adaptable a distintos dispositivos.

HTML y CSS trabajan juntos

Podemos pensar la relación de esta manera:

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

HTML indica qué contenido existe. CSS define cómo se ve.

Por ejemplo, HTML puede crear un título:

<h1>Club Programador</h1>

Y CSS puede definir su color y tamaño:

h1 {
    color: blue;
    font-size: 40px;
}

La sintaxis básica de CSS

Una regla CSS suele tener esta estructura:

selector {
    propiedad: valor;
}

Por ejemplo:

p {
    color: green;
    font-size: 18px;
}

En este caso:

  • p es el selector;
  • color y font-size son propiedades;
  • green y 18px son valores.

¿Qué es un selector?

El selector indica qué elementos HTML queremos modificar.

Si escribimos:

h2 {
    color: red;
}

todos los elementos h2 afectados por esa regla se mostrarán con ese color.

Tres formas de aplicar CSS

CSS puede aplicarse de tres maneras principales.

1. CSS inline

El estilo se escribe directamente dentro del elemento HTML:

<p style="color: blue;">
    Texto azul
</p>

Puede ser útil para una prueba puntual, pero no es la mejor opción para organizar un sitio completo.

2. CSS interno

Podemos escribir reglas dentro de una etiqueta style en el head:

<head>

    <style>

        p {
            color: blue;
        }

    </style>

</head>

3. CSS externo

La forma más habitual para proyectos reales es utilizar un archivo independiente.

Por ejemplo:

mi-sitio/
|
|-- index.html
|-- styles.css

Dentro de styles.css podemos escribir:

body {
    background-color: #f5f5f5;
    font-family: Arial, sans-serif;
}

Y desde HTML lo vinculamos así:

<link rel="stylesheet" href="styles.css">

¿Dónde colocar el link de CSS?

La referencia al archivo CSS se coloca normalmente dentro de head:

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

<head>

    <meta charset="UTF-8">

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

    <title>Mi página</title>

    <link
        rel="stylesheet"
        href="styles.css"
    >

</head>

<body>

    <h1>Hola mundo</h1>

</body>

</html>

Primer ejemplo completo

Supongamos que tenemos este archivo index.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 con CSS</title>

    <link
        rel="stylesheet"
        href="styles.css"
    >

</head>

<body>

    <h1>Club Programador</h1>

    <p>
        Estoy aprendiendo CSS.
    </p>

</body>

</html>

Y este archivo styles.css:

body {
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
}
h1 {
    color: #007bff;
    font-size: 40px;
}
p {
    color: #333;
    font-size: 18px;
}

Al abrir index.html en el navegador, veremos que HTML mantiene la estructura y CSS modifica su apariencia.

Selectores de etiqueta

El selector más básico utiliza el nombre de una etiqueta HTML.

p {
    color: #333;
}

Esta regla afecta a los párrafos.

Selectores por class

Una clase permite aplicar el mismo estilo a varios elementos.

HTML:

<p class="destacado">
    Primer texto
</p>

<p class="destacado">
    Segundo texto
</p>

CSS:

.destacado {
    color: #007bff;
    font-weight: bold;
}

Las clases se escriben en CSS comenzando con un punto.

Selectores por id

También podemos seleccionar un elemento por su id.

HTML:

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

CSS:

#titulo-principal {
    color: #007bff;
}

Los identificadores se escriben en CSS comenzando con #.

¿Class o id?

Como regla inicial:

  • class: para estilos que pueden reutilizarse;
  • id: para identificar un elemento concreto.

En CSS moderno, para estilos reutilizables es habitual trabajar principalmente con clases.

Colores

CSS permite definir colores de distintas formas.

Por nombre

h1 {
    color: blue;
}

Hexadecimal

h1 {
    color: #007bff;
}

RGB

h1 {
    color: rgb(0, 123, 255);
}

Color de fondo

body {
    background-color: #f5f5f5;
}

Tipografías

Podemos elegir una familia tipográfica:

body {
    font-family: Arial, Helvetica, sans-serif;
}

Tamaño del texto

p {
    font-size: 18px;
}

px significa píxeles, aunque más adelante veremos otras unidades como rem, em, %, vw y vh.

Negrita

h1 {
    font-weight: bold;
}

Alineación del texto

h1 {
    text-align: center;
}

Bordes

.tarjeta {
    border: 1px solid #cccccc;
}

Border radius

Podemos redondear las esquinas:

.tarjeta {
    border-radius: 10px;
}

Margin y padding

Dos propiedades fundamentales son margin y padding.

.tarjeta {
    margin: 20px;
    padding: 20px;
}

Podemos pensarlo así:

margin
    espacio exterior

border
    borde

padding
    espacio interior

contenido

Más adelante veremos esto con detalle cuando estudiemos el modelo de caja.

Transformemos una sección HTML

Supongamos que tenemos:

<section class="presentacion">

    <h1>Juan Pérez</h1>

    <p>
        Estudiante de programación
    </p>

</section>

Podemos aplicar:

.presentacion {
    background-color: #0b1220;
    color: white;
    padding: 40px;
    text-align: center;
    border-radius: 12px;
}

Con unas pocas propiedades, una estructura HTML muy simple empieza a transformarse visualmente.

CSS no cambia el significado del HTML

CSS puede hacer que un elemento se vea completamente diferente, pero su significado semántico sigue estando definido por HTML.

Por ejemplo, un h1 sigue siendo el encabezado principal aunque CSS cambie su tamaño, color o tipografía.

Por eso conviene construir primero un HTML correcto y después aplicar estilos.

¿Qué significa “en cascada”?

La palabra Cascading hace referencia a que pueden existir varias reglas que intenten aplicar estilos al mismo elemento.

El navegador debe decidir cuál prevalece teniendo en cuenta factores como:

  • el origen de la regla;
  • la especificidad del selector;
  • el orden en que aparecen las reglas;
  • algunas reglas especiales que veremos más adelante.

No hace falta dominarlo todavía. Lo importante es entender que CSS tiene un sistema para resolver conflictos entre estilos.

Errores comunes al comenzar con CSS

  • olvidar el punto y coma al separar declaraciones;
  • olvidar los dos puntos entre propiedad y valor;
  • escribir incorrectamente el selector;
  • olvidar enlazar styles.css desde HTML;
  • usar una ruta incorrecta en href;
  • confundir class con id;
  • intentar resolver la estructura del contenido únicamente con CSS;
  • abusar de estilos inline cuando el proyecto empieza a crecer.

Qué aprendimos

En esta primera guía de CSS vimos:

  • qué es CSS;
  • por qué no es un lenguaje de programación;
  • cómo se relaciona con HTML;
  • la sintaxis selector-propiedad-valor;
  • CSS inline, interno y externo;
  • cómo crear styles.css;
  • cómo enlazarlo con HTML;
  • selectores de etiqueta, clase e id;
  • colores;
  • tipografías;
  • tamaños;
  • fondos;
  • bordes;
  • margin y padding.

De HTML a CSS

Si venís siguiendo la ruta de desarrollo web, el paso anterior fue:

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

El siguiente paso es profundizar en los selectores CSS para aprender a elegir con precisión qué elementos queremos modificar:

Selectores CSS: etiquetas, clases, ID, descendientes y combinadores →

Después continuaremos con modelo de caja, tipografías, Flexbox, Grid y diseño responsive.


¿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

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>

y:

<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

Proyecto final en Python: sistema de gestión de alumnos paso a paso

Proyecto final en Python paso a paso: sistema de gestión de alumnos con notas, promedios, búsqueda, ordenamiento, estadísticas, listas y funciones.

Llegamos al final de esta primera ruta de aprendizaje de Python. Hasta ahora trabajamos variables, tipos de datos, condicionales, ciclos, listas, funciones, búsqueda y ordenamiento.

En este proyecto vamos a combinar todos esos conceptos en un programa completo: un sistema de gestión de alumnos que permite cargar estudiantes, registrar notas, calcular promedios, buscar, ordenar y obtener estadísticas.

Objetivo: dejar de resolver ejercicios aislados y empezar a pensar un programa como un conjunto de responsabilidades que trabajan entre sí.

¿Qué va a permitir hacer el sistema?

  • agregar alumnos;
  • cargar varias notas por alumno;
  • listar todos los alumnos;
  • calcular el promedio individual;
  • buscar un alumno por nombre;
  • ordenar alumnos por promedio;
  • mostrar el mejor y el peor promedio;
  • contar aprobados y desaprobados;
  • utilizar un menú interactivo;
  • organizar la lógica mediante funciones.

Cómo vamos a guardar los datos

Utilizaremos una lista llamada alumnos. Cada alumno estará representado por un diccionario.

alumnos = [
    {
        "nombre": "Ana",
        "notas": [8, 7, 9]
    },
    {
        "nombre": "Luis",
        "notas": [5, 6, 7]
    },
    {
        "nombre": "Maria",
        "notas": [9, 8, 10]
    },
    {
        "nombre": "Pedro",
        "notas": [4, 5, 6]
    },
    {
        "nombre": "Sofia",
        "notas": [7, 7, 8]
    },
    {
        "nombre": "Carlos",
        "notas": [3, 5, 4]
    }
]

Un diccionario nos permite asociar nombres de campos con valores. En este caso cada alumno tiene un nombre y una lista de notas.

No necesitamos dominar todavía todos los detalles de los diccionarios. En este proyecto los usamos simplemente como una forma clara de mantener juntos los datos que pertenecen a una misma persona.

1. Función para calcular el promedio

def calcular_promedio(notas):
    if len(notas) == 0:
        return 0

    suma = 0

    for nota in notas:
        suma += nota

    return suma / len(notas)

Esta función recibe una lista de notas y devuelve el promedio.

2. Buscar un alumno por nombre

def buscar_alumno(alumnos, nombre):
    for alumno in alumnos:
        if alumno["nombre"].lower() == nombre.lower():
            return alumno

    return None

Utilizamos lower() para que la búsqueda no dependa de mayúsculas o minúsculas.

Si el alumno no existe, devolvemos None.

3. Agregar un alumno

def agregar_alumno(alumnos):
    nombre = input("Nombre del alumno: ").strip()

    if nombre == "":
        print("El nombre no puede estar vacio")
        return

    if buscar_alumno(alumnos, nombre) is not None:
        print("El alumno ya existe")
        return

    notas = []

    cantidad = int(input("Cuantas notas desea cargar: "))

    for i in range(cantidad):
        nota = float(input("Ingrese la nota " + str(i + 1) + ": "))
        notas.append(nota)

    alumno = {
        "nombre": nombre,
        "notas": notas
    }

    alumnos.append(alumno)

    print("Alumno agregado correctamente")

Aquí combinamos entrada de datos, condicionales, ciclos, listas y funciones.

4. Listar alumnos

def listar_alumnos(alumnos):
    if len(alumnos) == 0:
        print("No hay alumnos cargados")
        return

    print("")
    print("=== LISTADO DE ALUMNOS ===")

    for alumno in alumnos:
        promedio = calcular_promedio(alumno["notas"])

        print("Nombre:", alumno["nombre"])
        print("Notas:", alumno["notas"])
        print("Promedio:", round(promedio, 2))
        print("------------------------")

round(promedio, 2) permite mostrar el promedio con dos decimales.

5. Buscar y mostrar un alumno

def mostrar_alumno(alumnos):
    nombre = input("Nombre a buscar: ")

    alumno = buscar_alumno(alumnos, nombre)

    if alumno is None:
        print("Alumno no encontrado")
        return

    promedio = calcular_promedio(alumno["notas"])

    print("Nombre:", alumno["nombre"])
    print("Notas:", alumno["notas"])
    print("Promedio:", round(promedio, 2))

6. Ordenar alumnos por promedio

Podemos ordenar utilizando sorted() y una función auxiliar.

def promedio_alumno(alumno):
    return calcular_promedio(alumno["notas"])

def listar_por_promedio(alumnos):
    ordenados = sorted(
        alumnos,
        key=promedio_alumno,
        reverse=True
    )

    print("")
    print("=== ALUMNOS POR PROMEDIO ===")

    for alumno in ordenados:
        promedio = calcular_promedio(alumno["notas"])

        print(
            alumno["nombre"],
            "- Promedio:",
            round(promedio, 2)
        )

reverse=True hace que los promedios más altos aparezcan primero.

7. Mostrar mejor y peor promedio

def mostrar_extremos(alumnos):
    if len(alumnos) == 0:
        print("No hay alumnos cargados")
        return

    mejor = alumnos[0]
    peor = alumnos[0]

    for alumno in alumnos:
        if calcular_promedio(alumno["notas"]) > calcular_promedio(mejor["notas"]):
            mejor = alumno

        if calcular_promedio(alumno["notas"]) < calcular_promedio(peor["notas"]):
            peor = alumno

    print(
        "Mejor promedio:",
        mejor["nombre"],
        round(calcular_promedio(mejor["notas"]), 2)
    )

    print(
        "Peor promedio:",
        peor["nombre"],
        round(calcular_promedio(peor["notas"]), 2)
    )

8. Contar aprobados y desaprobados

Para este ejemplo consideraremos aprobado un promedio mayor o igual a 6.

def mostrar_estadisticas(alumnos):
    if len(alumnos) == 0:
        print("No hay alumnos cargados")
        return

    aprobados = 0
    desaprobados = 0

    for alumno in alumnos:
        promedio = calcular_promedio(alumno["notas"])

        if promedio >= 6:
            aprobados += 1
        else:
            desaprobados += 1

    print("Cantidad de alumnos:", len(alumnos))
    print("Aprobados:", aprobados)
    print("Desaprobados:", desaprobados)

9. Crear el menú principal

def mostrar_menu():
    print("")
    print("=== SISTEMA DE ALUMNOS ===")
    print("1. Agregar alumno")
    print("2. Listar alumnos")
    print("3. Buscar alumno")
    print("4. Ordenar por promedio")
    print("5. Mejor y peor promedio")
    print("6. Estadisticas")
    print("7. Salir")

Código completo del proyecto

Ahora reunimos todas las funciones en un único programa.

def calcular_promedio(notas):
    if len(notas) == 0:
        return 0

    suma = 0

    for nota in notas:
        suma += nota

    return suma / len(notas)


def buscar_alumno(alumnos, nombre):
    for alumno in alumnos:
        if alumno["nombre"].lower() == nombre.lower():
            return alumno

    return None


def agregar_alumno(alumnos):
    nombre = input("Nombre del alumno: ").strip()

    if nombre == "":
        print("El nombre no puede estar vacio")
        return

    if buscar_alumno(alumnos, nombre) is not None:
        print("El alumno ya existe")
        return

    notas = []

    cantidad = int(input("Cuantas notas desea cargar: "))

    for i in range(cantidad):
        nota = float(input("Ingrese la nota " + str(i + 1) + ": "))
        notas.append(nota)

    alumno = {
        "nombre": nombre,
        "notas": notas
    }

    alumnos.append(alumno)

    print("Alumno agregado correctamente")


def listar_alumnos(alumnos):
    if len(alumnos) == 0:
        print("No hay alumnos cargados")
        return

    print("")
    print("=== LISTADO DE ALUMNOS ===")

    for alumno in alumnos:
        promedio = calcular_promedio(alumno["notas"])

        print("Nombre:", alumno["nombre"])
        print("Notas:", alumno["notas"])
        print("Promedio:", round(promedio, 2))
        print("------------------------")


def mostrar_alumno(alumnos):
    nombre = input("Nombre a buscar: ")

    alumno = buscar_alumno(alumnos, nombre)

    if alumno is None:
        print("Alumno no encontrado")
        return

    promedio = calcular_promedio(alumno["notas"])

    print("Nombre:", alumno["nombre"])
    print("Notas:", alumno["notas"])
    print("Promedio:", round(promedio, 2))


def promedio_alumno(alumno):
    return calcular_promedio(alumno["notas"])


def listar_por_promedio(alumnos):
    if len(alumnos) == 0:
        print("No hay alumnos cargados")
        return

    ordenados = sorted(
        alumnos,
        key=promedio_alumno,
        reverse=True
    )

    print("")
    print("=== ALUMNOS POR PROMEDIO ===")

    for alumno in ordenados:
        promedio = calcular_promedio(alumno["notas"])

        print(
            alumno["nombre"],
            "- Promedio:",
            round(promedio, 2)
        )


def mostrar_extremos(alumnos):
    if len(alumnos) == 0:
        print("No hay alumnos cargados")
        return

    mejor = alumnos[0]
    peor = alumnos[0]

    for alumno in alumnos:
        promedio = calcular_promedio(alumno["notas"])
        promedio_mejor = calcular_promedio(mejor["notas"])
        promedio_peor = calcular_promedio(peor["notas"])

        if promedio > promedio_mejor:
            mejor = alumno

        if promedio < promedio_peor:
            peor = alumno

    print(
        "Mejor promedio:",
        mejor["nombre"],
        round(calcular_promedio(mejor["notas"]), 2)
    )

    print(
        "Peor promedio:",
        peor["nombre"],
        round(calcular_promedio(peor["notas"]), 2)
    )


def mostrar_estadisticas(alumnos):
    if len(alumnos) == 0:
        print("No hay alumnos cargados")
        return

    aprobados = 0
    desaprobados = 0

    for alumno in alumnos:
        promedio = calcular_promedio(alumno["notas"])

        if promedio >= 6:
            aprobados += 1
        else:
            desaprobados += 1

    print("Cantidad de alumnos:", len(alumnos))
    print("Aprobados:", aprobados)
    print("Desaprobados:", desaprobados)


def mostrar_menu():
    print("")
    print("=== SISTEMA DE ALUMNOS ===")
    print("1. Agregar alumno")
    print("2. Listar alumnos")
    print("3. Buscar alumno")
    print("4. Ordenar por promedio")
    print("5. Mejor y peor promedio")
    print("6. Estadisticas")
    print("7. Salir")


alumnos = []
opcion = 0

while opcion != 7:
    mostrar_menu()

    opcion = int(input("Seleccione una opcion: "))

    if opcion == 1:
        agregar_alumno(alumnos)

    elif opcion == 2:
        listar_alumnos(alumnos)

    elif opcion == 3:
        mostrar_alumno(alumnos)

    elif opcion == 4:
        listar_por_promedio(alumnos)

    elif opcion == 5:
        mostrar_extremos(alumnos)

    elif opcion == 6:
        mostrar_estadisticas(alumnos)

    elif opcion == 7:
        print("Programa finalizado")

    else:
        print("Opcion invalida")

Cómo funciona el programa

El flujo principal es sencillo:

  1. creamos una lista vacía llamada alumnos;
  2. mostramos el menú;
  3. el usuario selecciona una opción;
  4. cada opción llama a una función específica;
  5. las funciones trabajan sobre la misma lista de alumnos;
  6. el menú se repite hasta elegir la opción de salida.

Qué conceptos estamos utilizando

Este proyecto combina prácticamente todos los fundamentos vistos en la serie:

  • tipos de datos: cadenas, enteros, decimales y valores lógicos;
  • condicionales: decisiones mediante if, elif y else;
  • ciclos: for y while;
  • listas: para almacenar alumnos y notas;
  • funciones: para separar responsabilidades;
  • búsqueda: para localizar alumnos;
  • ordenamiento: para mostrar alumnos según promedio;
  • None: para representar una búsqueda sin resultado;
  • modularización: para evitar tener toda la lógica mezclada.

Pruebas que conviene realizar

Antes de considerar terminado un programa, conviene probar distintos escenarios.

  • agregar varios alumnos;
  • buscar un alumno existente;
  • buscar uno que no existe;
  • intentar cargar un nombre repetido;
  • listar con la base vacía;
  • ordenar varios promedios;
  • probar alumnos aprobados y desaprobados;
  • comprobar el mejor y peor promedio;
  • ingresar una opción de menú inválida.

Mejoras posibles

El proyecto puede seguir creciendo. Algunas ideas:

  • validar que las notas estén dentro de un rango determinado;
  • permitir modificar las notas de un alumno;
  • eliminar alumnos;
  • guardar más datos, como documento o curso;
  • mostrar el promedio general del curso;
  • agregar cantidad de materias aprobadas;
  • guardar la información en un archivo;
  • recuperar los datos al iniciar el programa;
  • crear una interfaz gráfica;
  • guardar los alumnos en una base de datos.

Un paso importante: los datos todavía no son permanentes

En esta versión toda la información vive en memoria. Cuando cerramos el programa, la lista de alumnos desaparece.

Esto no es un error: para esta etapa nos permite concentrarnos en la lógica.

Más adelante podemos aprender a guardar información en archivos o bases de datos para que los datos continúen disponibles entre distintas ejecuciones.

Errores comunes en un proyecto de este tipo

  • escribir toda la lógica dentro del while principal;
  • repetir código que podría estar en una función;
  • confundir mostrar un dato con devolverlo mediante return;
  • no controlar listas vacías antes de acceder a la primera posición;
  • olvidar que las posiciones de las listas comienzan en 0;
  • no contemplar búsquedas sin resultado;
  • mezclar demasiadas responsabilidades dentro de una única función.

Qué aprendiste en esta serie de Python

Si llegaste hasta este proyecto, ya recorriste una base muy importante del lenguaje.

Durante esta serie trabajamos:

  • instalación y primeros pasos con Python;
  • el paso desde PSeInt hacia código real;
  • tipos de datos y conversiones;
  • condicionales y ciclos;
  • listas;
  • funciones;
  • búsquedas;
  • ordenamientos;
  • organización de programas;
  • un proyecto completo que integra todos esos conceptos.

El objetivo no es memorizar cada instrucción. Lo importante es aprender a analizar un problema, dividirlo en partes y convertir cada parte en instrucciones que la computadora pueda ejecutar.

¿Qué sigue después?

Con esta base ya podemos avanzar hacia temas como diccionarios en profundidad, archivos, manejo de errores, programación orientada a objetos, módulos, bases de datos y desarrollo de aplicaciones más completas.

También podemos aplicar la misma lógica aprendida acá a otros lenguajes como JavaScript, C, Java o C#.

Repasá toda la ruta de Python

Este proyecto integra los temas desarrollados a lo largo de toda la serie. Si querés repasar algún punto, podés volver directamente a cada guía:

  1. Introducción a Python: instalación y primeros pasos
  2. De PSeInt a Python: 10 algoritmos traducidos paso a paso
  3. 20 ejercicios resueltos de Python para principiantes
  4. Tipos de datos en Python
  5. Condicionales y ciclos en Python
  6. Listas en Python
  7. Funciones en Python
  8. Algoritmos de búsqueda y ordenamiento en Python

Ver el centro de contenidos de Python →


¿Te sirvió esta serie? ☕

Si estas guías te ayudaron a aprender programación, 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

Algoritmos de búsqueda y ordenamiento en Python: ejemplos resueltos paso a paso

Aprendé algoritmos de búsqueda y ordenamiento en Python: búsqueda lineal, binaria, burbuja, selección, inserción y ejercicios resueltos paso a paso.

Buscar y ordenar datos son dos tareas fundamentales en programación. Aunque Python incluye herramientas listas para usar, entender cómo funcionan los algoritmos clásicos ayuda a mejorar la lógica, comprender la eficiencia y resolver problemas de forma más consciente.

En esta guía vamos a implementar paso a paso algoritmos de búsqueda y ordenamiento en Python, incluyendo búsqueda lineal, búsqueda binaria, burbuja, selección e inserción.

Idea clave: aprender estos algoritmos no significa que debamos programarlos manualmente cada vez. Python ya ofrece herramientas eficientes, pero conocer su lógica interna es fundamental para aprender estructuras de datos y análisis de algoritmos.

¿Qué significa buscar y ordenar?

Buscar significa localizar un dato dentro de una colección.

Ordenar significa reorganizar los elementos según algún criterio, por ejemplo de menor a mayor, de mayor a menor o alfabéticamente.

numeros = [8, 3, 10, 1, 6]

Ordenada de menor a mayor:

[1, 3, 6, 8, 10]

Búsqueda lineal

La búsqueda lineal recorre los elementos uno por uno hasta encontrar el valor buscado.

def busqueda_lineal(lista, buscado):
    for i in range(len(lista)):
        if lista[i] == buscado:
            return i

    return -1

numeros = [10, 20, 30, 40]

posicion = busqueda_lineal(numeros, 30)

print(posicion)

El resultado será 2, porque Python comienza a contar las posiciones desde 0.

Búsqueda binaria

La búsqueda binaria es más eficiente para listas grandes, pero tiene una condición fundamental:

la lista debe estar ordenada.

def busqueda_binaria(lista, buscado):
    izquierda = 0
    derecha = len(lista) - 1

    while izquierda <= derecha:
        medio = (izquierda + derecha) // 2

        if lista[medio] == buscado:
            return medio

        if lista[medio] < buscado:
            izquierda = medio + 1
        else:
            derecha = medio - 1

    return -1

numeros = [10, 20, 30, 40, 50]

print(busqueda_binaria(numeros, 40))

Ordenamiento burbuja

El método burbuja compara pares de elementos consecutivos y los intercambia cuando están en el orden incorrecto.

def burbuja(lista):
    resultado = lista.copy()

    for i in range(len(resultado) - 1):
        for j in range(len(resultado) - 1 - i):
            if resultado[j] > resultado[j + 1]:
                resultado[j], resultado[j + 1] = resultado[j + 1], resultado[j]

    return resultado

numeros = [8, 3, 10, 1, 6]

print(burbuja(numeros))

Ordenamiento por selección

Selección busca el menor elemento de la parte desordenada y lo coloca en la posición correspondiente.

def seleccion(lista):
    resultado = lista.copy()

    for i in range(len(resultado) - 1):
        posicion_menor = i

        for j in range(i + 1, len(resultado)):
            if resultado[j] < resultado[posicion_menor]:
                posicion_menor = j

        resultado[i], resultado[posicion_menor] = resultado[posicion_menor], resultado[i]

    return resultado

numeros = [8, 3, 10, 1, 6]

print(seleccion(numeros))

Ordenamiento por inserción

Inserción toma cada elemento y lo coloca en su posición correcta dentro de la parte ya ordenada.

def insercion(lista):
    resultado = lista.copy()

    for i in range(1, len(resultado)):
        actual = resultado[i]
        j = i - 1

        while j >= 0 and resultado[j] > actual:
            resultado[j + 1] = resultado[j]
            j -= 1

        resultado[j + 1] = actual

    return resultado

numeros = [8, 3, 10, 1, 6]

print(insercion(numeros))

Herramientas nativas de Python

En programas reales normalmente utilizaremos herramientas incorporadas.

Buscar con in

numeros = [10, 20, 30]

if 20 in numeros:
    print("Encontrado")

Obtener la posición con index()

numeros = [10, 20, 30]

posicion = numeros.index(20)

print(posicion)

Ordenar con sorted()

numeros = [8, 3, 10, 1]

ordenados = sorted(numeros)

print(ordenados)

Ordenar la lista original con sort()

numeros = [8, 3, 10, 1]

numeros.sort()

print(numeros)

sorted() vs sort()

sorted() devuelve una nueva lista y deja la original sin cambios.

sort() modifica directamente la lista.

numeros = [3, 1, 2]

ordenados = sorted(numeros)

print(numeros)
print(ordenados)

¿Para qué aprender estos algoritmos si Python ya tiene sorted() e in?

Porque programar no consiste solamente en conocer funciones existentes. Implementar estos algoritmos permite entender:

  • cómo se recorren estructuras de datos;
  • cómo se comparan valores;
  • cómo se intercambian elementos;
  • cómo influye el orden de los datos;
  • por qué algunos algoritmos son más rápidos que otros;
  • cómo dividir un problema en pasos;
  • qué ocurre internamente cuando buscamos u ordenamos información.

En aplicaciones reales normalmente elegiremos las herramientas nativas de Python, que están altamente optimizadas. Pero estudiar los algoritmos manualmente desarrolla habilidades que se aplican mucho más allá de este tema.

Una introducción a la complejidad

La complejidad describe cómo crece el trabajo que realiza un algoritmo cuando aumenta la cantidad de datos.

Sin entrar todavía en un análisis matemático profundo:

  • la búsqueda lineal puede necesitar revisar todos los elementos;
  • la búsqueda binaria descarta aproximadamente la mitad de los elementos en cada paso;
  • burbuja, selección e inserción pueden realizar muchas comparaciones cuando la lista crece.

Más adelante este concepto se estudia formalmente mediante notaciones como O(n), O(log n) y O(n²).

Índice de ejercicios

  1. Búsqueda lineal
  2. Búsqueda lineal devolviendo posición
  3. Buscar un nombre
  4. Búsqueda binaria
  5. Burbuja ascendente
  6. Burbuja descendente
  7. Ordenamiento por selección
  8. Ordenamiento por inserción
  9. Ordenar nombres
  10. Ordenar notas
  11. Eliminar duplicados y ordenar
  12. Buscar máximo y mínimo
  13. Comparar búsqueda manual con in
  14. Comparar burbuja con sorted()
  15. Función reutilizable de búsqueda
  16. Función reutilizable de burbuja
  17. Buscar dentro de nombres
  18. Ordenar y luego buscar
  19. Contar comparaciones
  20. Mini sistema para cargar, ordenar y buscar

1. Búsqueda lineal

numeros = [4, 8, 15, 16, 23, 42]
buscado = 15
encontrado = False

for numero in numeros:
    if numero == buscado:
        encontrado = True

if encontrado:
    print("Encontrado")
else:
    print("No encontrado")

2. Búsqueda lineal devolviendo posición

def buscar(lista, buscado):
    for i in range(len(lista)):
        if lista[i] == buscado:
            return i

    return -1

numeros = [10, 20, 30, 40]

posicion = buscar(numeros, 30)

if posicion != -1:
    print("Encontrado en la posicion", posicion)
else:
    print("No encontrado")

3. Buscar un nombre

nombres = ["Ana", "Luis", "Pedro", "Maria"]
buscado = input("Ingrese un nombre: ")

encontrado = False

for nombre in nombres:
    if nombre.lower() == buscado.lower():
        encontrado = True

if encontrado:
    print("Nombre encontrado")
else:
    print("Nombre no encontrado")

4. Búsqueda binaria

def busqueda_binaria(lista, buscado):
    izquierda = 0
    derecha = len(lista) - 1

    while izquierda <= derecha:
        medio = (izquierda + derecha) // 2

        if lista[medio] == buscado:
            return medio

        if lista[medio] < buscado:
            izquierda = medio + 1
        else:
            derecha = medio - 1

    return -1

numeros = [2, 5, 8, 12, 16, 20, 25]

print(busqueda_binaria(numeros, 16))

5. Burbuja ascendente

numeros = [5, 2, 8, 1, 4]

for i in range(len(numeros) - 1):
    for j in range(len(numeros) - 1 - i):
        if numeros[j] > numeros[j + 1]:
            numeros[j], numeros[j + 1] = numeros[j + 1], numeros[j]

print(numeros)

6. Burbuja descendente

numeros = [5, 2, 8, 1, 4]

for i in range(len(numeros) - 1):
    for j in range(len(numeros) - 1 - i):
        if numeros[j] < numeros[j + 1]:
            numeros[j], numeros[j + 1] = numeros[j + 1], numeros[j]

print(numeros)

7. Ordenamiento por selección

numeros = [9, 3, 7, 1, 5]

for i in range(len(numeros) - 1):
    menor = i

    for j in range(i + 1, len(numeros)):
        if numeros[j] < numeros[menor]:
            menor = j

    numeros[i], numeros[menor] = numeros[menor], numeros[i]

print(numeros)

8. Ordenamiento por inserción

numeros = [9, 3, 7, 1, 5]

for i in range(1, len(numeros)):
    actual = numeros[i]
    j = i - 1

    while j >= 0 and numeros[j] > actual:
        numeros[j + 1] = numeros[j]
        j -= 1

    numeros[j + 1] = actual

print(numeros)

9. Ordenar nombres

nombres = ["Pedro", "Ana", "Luis", "Maria"]

ordenados = sorted(nombres)

print(ordenados)

10. Ordenar notas

notas = [7.5, 9, 6, 8.5, 10]

notas.sort(reverse=True)

print(notas)

11. Eliminar duplicados y ordenar

numeros = [5, 2, 5, 8, 2, 1, 8]
sin_duplicados = []

for numero in numeros:
    if numero not in sin_duplicados:
        sin_duplicados.append(numero)

sin_duplicados.sort()

print(sin_duplicados)

12. Buscar máximo y mínimo

numeros = [8, 3, 15, 2, 11]

mayor = numeros[0]
menor = numeros[0]

for numero in numeros:
    if numero > mayor:
        mayor = numero

    if numero < menor:
        menor = numero

print("Mayor:", mayor)
print("Menor:", menor)

13. Comparar búsqueda manual con in

numeros = [10, 20, 30, 40]
buscado = 30

encontrado_manual = False

for numero in numeros:
    if numero == buscado:
        encontrado_manual = True

print("Busqueda manual:", encontrado_manual)
print("Usando in:", buscado in numeros)

14. Comparar burbuja con sorted()

original = [8, 3, 10, 1, 6]

burbuja = original.copy()

for i in range(len(burbuja) - 1):
    for j in range(len(burbuja) - 1 - i):
        if burbuja[j] > burbuja[j + 1]:
            burbuja[j], burbuja[j + 1] = burbuja[j + 1], burbuja[j]

nativo = sorted(original)

print("Burbuja:", burbuja)
print("sorted():", nativo)

15. Función reutilizable de búsqueda

def buscar(lista, valor):
    for i in range(len(lista)):
        if lista[i] == valor:
            return i

    return -1

datos = [12, 18, 25, 30]

print(buscar(datos, 25))

16. Función reutilizable de burbuja

def ordenar_burbuja(lista):
    resultado = lista.copy()

    for i in range(len(resultado) - 1):
        for j in range(len(resultado) - 1 - i):
            if resultado[j] > resultado[j + 1]:
                resultado[j], resultado[j + 1] = resultado[j + 1], resultado[j]

    return resultado

numeros = [7, 2, 9, 1]

print(ordenar_burbuja(numeros))

17. Buscar dentro de nombres

def buscar_nombre(nombres, buscado):
    for i in range(len(nombres)):
        if nombres[i].lower() == buscado.lower():
            return i

    return -1

nombres = ["Ana", "Carlos", "Maria", "Pedro"]

posicion = buscar_nombre(nombres, "maria")

print(posicion)

18. Ordenar y luego buscar

numeros = [30, 10, 50, 20, 40]

numeros.sort()

buscado = 40

izquierda = 0
derecha = len(numeros) - 1
posicion = -1

while izquierda <= derecha and posicion == -1:
    medio = (izquierda + derecha) // 2

    if numeros[medio] == buscado:
        posicion = medio
    elif numeros[medio] < buscado:
        izquierda = medio + 1
    else:
        derecha = medio - 1

print("Lista ordenada:", numeros)
print("Posicion:", posicion)

19. Contar comparaciones

numeros = [8, 3, 10, 1, 6]
comparaciones = 0

for i in range(len(numeros) - 1):
    for j in range(len(numeros) - 1 - i):
        comparaciones += 1

        if numeros[j] > numeros[j + 1]:
            numeros[j], numeros[j + 1] = numeros[j + 1], numeros[j]

print("Lista:", numeros)
print("Comparaciones:", comparaciones)

20. Mini sistema para cargar, ordenar y buscar

def cargar_numeros():
    numeros = []

    cantidad = int(input("Cuantos numeros desea cargar: "))

    for i in range(cantidad):
        numero = int(input("Ingrese un numero: "))
        numeros.append(numero)

    return numeros

def buscar(lista, valor):
    for i in range(len(lista)):
        if lista[i] == valor:
            return i

    return -1

numeros = []
opcion = 0

while opcion != 4:
    print("")
    print("=== MENU ===")
    print("1. Cargar numeros")
    print("2. Ordenar")
    print("3. Buscar")
    print("4. Salir")

    opcion = int(input("Seleccione una opcion: "))

    if opcion == 1:
        numeros = cargar_numeros()
        print("Datos cargados:", numeros)

    elif opcion == 2:
        numeros.sort()
        print("Lista ordenada:", numeros)

    elif opcion == 3:
        valor = int(input("Valor a buscar: "))
        posicion = buscar(numeros, valor)

        if posicion != -1:
            print("Encontrado en la posicion", posicion)
        else:
            print("No encontrado")

    elif opcion == 4:
        print("Programa finalizado")

    else:
        print("Opcion invalida")

Errores comunes

  • Aplicar búsqueda binaria sobre una lista desordenada.
  • Olvidar que los índices comienzan en 0.
  • Confundir sorted() con sort().
  • No conservar una copia cuando queremos mantener la lista original.
  • Usar index() sin verificar si el valor existe.
  • Implementar manualmente algoritmos en producción cuando una herramienta nativa resuelve mejor el problema.

Qué aprendimos

Con estos ejercicios practicamos búsquedas, comparaciones, intercambios, ciclos anidados, funciones y manejo de listas.

También vimos una idea importante: conocer el algoritmo y saber cuándo usar una herramienta nativa son habilidades complementarias.

Próximo paso: proyecto final en Python

Ya trabajamos variables, tipos de datos, condicionales, ciclos, listas, funciones, búsqueda y ordenamiento. El siguiente paso será combinar todos estos conceptos en un proyecto completo en Python.

Seguí aprendiendo Python

Si querés repasar cómo organizar estos algoritmos en bloques reutilizables, consultá Funciones en Python.

Con búsqueda y ordenamiento ya tenemos las piezas principales para cerrar esta primera ruta:

Proyecto final en Python: sistema de gestión de alumnos paso a paso →

Ver la ruta completa de Python


¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender Python, 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

Funciones en Python: parámetros, return y 20 ejercicios resueltos

Aprendé funciones en Python con parámetros, argumentos, return, variables locales y 20 ejercicios resueltos paso a paso.

Las funciones son una de las herramientas más importantes para organizar programas en Python. Nos permiten agrupar instrucciones bajo un nombre, reutilizar código y dividir problemas grandes en partes más pequeñas.

En esta guía vamos a aprender cómo definir funciones con def, utilizar parámetros, devolver resultados con return y resolver ejercicios prácticos para entender cómo aplicarlas correctamente.

Idea clave: una función encapsula una tarea concreta. En lugar de repetir el mismo código varias veces, podemos escribirlo una sola vez y llamarlo cada vez que lo necesitemos.

¿Por qué usar funciones?

A medida que un programa crece, escribir todo el código seguido se vuelve difícil de leer, mantener y corregir. Las funciones ayudan a dividir el programa en pequeñas responsabilidades.

Entre sus principales ventajas encontramos:

  • evitar código repetido;
  • separar responsabilidades;
  • facilitar la lectura del programa;
  • hacer más simple el mantenimiento;
  • reutilizar lógica en distintas partes;
  • probar pequeñas partes del programa de forma independiente.

Cómo definir una función con def

Una función se define utilizando la palabra reservada def.

def saludar():
    print("Hola desde una funcion")

Definirla no significa ejecutarla. Para hacerlo debemos llamarla:

saludar()

Funciones con parámetros

Los parámetros permiten enviar información a una función.

def saludar(nombre):
    print("Hola", nombre)

saludar("Ana")
saludar("Luis")

En este caso nombre es el parámetro de la función.

Parámetros y argumentos

Aunque muchas veces se utilizan como sinónimos, existe una diferencia conceptual:

  • parámetro: nombre que aparece en la definición de la función;
  • argumento: valor concreto que enviamos al llamar a la función.
def saludar(nombre):
    print("Hola", nombre)

saludar("Maria")

nombre es el parámetro y "Maria" es el argumento.

Devolver valores con return

Una función puede devolver un resultado utilizando return.

def sumar(a, b):
    return a + b

resultado = sumar(10, 5)

print(resultado)

Esto permite utilizar el resultado fuera de la función.

Diferencia entre print() y return

Esta diferencia es fundamental.

def sumar_con_print(a, b):
    print(a + b)

Esta función muestra el resultado en pantalla, pero no lo devuelve.

En cambio:

def sumar(a, b):
    return a + b

nos permite hacer:

resultado = sumar(10, 5)
doble = resultado * 2

print(doble)

print() muestra información. return entrega un valor al código que llamó a la función.

Funciones sin parámetros

def mostrar_menu():
    print("1. Agregar")
    print("2. Eliminar")
    print("3. Salir")

mostrar_menu()

Funciones con varios parámetros

def calcular_total(precio, cantidad):
    return precio * cantidad

total = calcular_total(1500, 3)

print(total)

Parámetros con valores por defecto

Podemos asignar un valor que se utilizará cuando el argumento no sea enviado.

def saludar(nombre, mensaje="Hola"):
    print(mensaje, nombre)

saludar("Ana")
saludar("Luis", "Bienvenido")

Variables locales

Las variables creadas dentro de una función normalmente pertenecen a esa función.

def calcular():
    resultado = 10 + 5
    print(resultado)

calcular()

resultado es una variable local.

Alcance de las variables

Una variable definida fuera de una función pertenece a un ámbito distinto.

mensaje = "Hola"

def mostrar():
    texto = "Python"
    print(mensaje)
    print(texto)

mostrar()

Al comenzar conviene que las funciones reciban los datos mediante parámetros y devuelvan resultados, evitando depender innecesariamente de variables globales.

Devolver más de un valor

Python permite devolver varios valores.

def operaciones(a, b):
    suma = a + b
    resta = a - b

    return suma, resta

resultado_suma, resultado_resta = operaciones(10, 4)

print(resultado_suma)
print(resultado_resta)

Funciones que reciben listas

def mostrar_numeros(numeros):
    for numero in numeros:
        print(numero)

lista = [10, 20, 30]

mostrar_numeros(lista)

Funciones que devuelven listas

def obtener_pares(numeros):
    pares = []

    for numero in numeros:
        if numero % 2 == 0:
            pares.append(numero)

    return pares

resultado = obtener_pares([1, 2, 3, 4, 5, 6])

print(resultado)

Índice de ejercicios

  1. Función que saluda
  2. Sumar dos números
  3. Mayor de dos números
  4. Par o impar
  5. Calcular promedio
  6. Factorial
  7. Número primo
  8. Contar vocales
  9. Mayor valor de una lista
  10. Promedio de una lista
  11. Filtrar números pares
  12. Calcular área
  13. Convertir temperatura
  14. Validar contraseña
  15. Devolver mayor y menor
  16. Parámetro por defecto
  17. Generar una lista
  18. Buscar un elemento
  19. Funciones reutilizadas entre sí
  20. Mini programa modular

1. Función que saluda

def saludar(nombre):
    print("Hola", nombre)

saludar("Club Programador")

2. Sumar dos números

def sumar(a, b):
    return a + b

resultado = sumar(8, 5)

print(resultado)

3. Mayor de dos números

def mayor(a, b):
    if a > b:
        return a
    else:
        return b

print(mayor(10, 7))

4. Par o impar

def es_par(numero):
    return numero % 2 == 0

numero = int(input("Ingrese un numero: "))

if es_par(numero):
    print("Es par")
else:
    print("Es impar")

5. Calcular promedio

def promedio(a, b, c):
    return (a + b + c) / 3

resultado = promedio(8, 7, 9)

print(resultado)

6. Factorial

def factorial(numero):
    resultado = 1

    for i in range(1, numero + 1):
        resultado *= i

    return resultado

print(factorial(5))

7. Número primo

def es_primo(numero):
    if numero < 2:
        return False

    divisor = 2

    while divisor * divisor <= numero:
        if numero % divisor == 0:
            return False

        divisor += 1

    return True

numero = int(input("Ingrese un numero: "))

if es_primo(numero):
    print("Es primo")
else:
    print("No es primo")

8. Contar vocales

def contar_vocales(texto):
    cantidad = 0

    for caracter in texto.lower():
        if caracter in "aeiou":
            cantidad += 1

    return cantidad

texto = input("Ingrese un texto: ")

print("Vocales:", contar_vocales(texto))

9. Mayor valor de una lista

def obtener_mayor(numeros):
    mayor = numeros[0]

    for numero in numeros:
        if numero > mayor:
            mayor = numero

    return mayor

numeros = [8, 3, 15, 4, 11]

print(obtener_mayor(numeros))

10. Promedio de una lista

def calcular_promedio(numeros):
    suma = 0

    for numero in numeros:
        suma += numero

    return suma / len(numeros)

notas = [7, 8, 9, 6]

print(calcular_promedio(notas))

11. Filtrar números pares

def obtener_pares(numeros):
    pares = []

    for numero in numeros:
        if numero % 2 == 0:
            pares.append(numero)

    return pares

numeros = [1, 2, 3, 4, 5, 6]

print(obtener_pares(numeros))

12. Calcular área

def calcular_area(base, altura):
    return base * altura

base = float(input("Ingrese la base: "))
altura = float(input("Ingrese la altura: "))

print("Area:", calcular_area(base, altura))

13. Convertir temperatura

def celsius_a_fahrenheit(celsius):
    return celsius * 9 / 5 + 32

temperatura = float(input("Ingrese grados Celsius: "))

print("Fahrenheit:", celsius_a_fahrenheit(temperatura))

14. Validar contraseña

def validar_clave(clave):
    return clave == "python123"

clave = input("Ingrese la clave: ")

if validar_clave(clave):
    print("Acceso permitido")
else:
    print("Clave incorrecta")

15. Devolver mayor y menor

def mayor_y_menor(numeros):
    mayor = numeros[0]
    menor = numeros[0]

    for numero in numeros:
        if numero > mayor:
            mayor = numero

        if numero < menor:
            menor = numero

    return mayor, menor

numeros = [8, 3, 15, 2, 11]

mayor, menor = mayor_y_menor(numeros)

print("Mayor:", mayor)
print("Menor:", menor)

16. Parámetro por defecto

def saludar(nombre, saludo="Hola"):
    print(saludo, nombre)

saludar("Ana")
saludar("Luis", "Bienvenido")

17. Generar una lista

def generar_lista(limite):
    numeros = []

    for numero in range(1, limite + 1):
        numeros.append(numero)

    return numeros

print(generar_lista(5))

18. Buscar un elemento

def buscar(lista, buscado):
    for elemento in lista:
        if elemento == buscado:
            return True

    return False

numeros = [10, 20, 30, 40]

if buscar(numeros, 30):
    print("Encontrado")
else:
    print("No encontrado")

19. Funciones reutilizadas entre sí

Una función puede llamar a otra función.

def es_par(numero):
    return numero % 2 == 0

def contar_pares(numeros):
    cantidad = 0

    for numero in numeros:
        if es_par(numero):
            cantidad += 1

    return cantidad

numeros = [1, 2, 4, 7, 10]

print("Cantidad de pares:", contar_pares(numeros))

20. Mini programa modular

En este último ejemplo dividimos un pequeño programa en distintas funciones.

def mostrar_menu():
    print("")
    print("=== MENU ===")
    print("1. Sumar")
    print("2. Par o impar")
    print("3. Salir")

def sumar(a, b):
    return a + b

def es_par(numero):
    return numero % 2 == 0

opcion = 0

while opcion != 3:
    mostrar_menu()
    opcion = int(input("Seleccione una opcion: "))

    if opcion == 1:
        a = float(input("Primer numero: "))
        b = float(input("Segundo numero: "))

        print("Resultado:", sumar(a, b))

    elif opcion == 2:
        numero = int(input("Ingrese un numero: "))

        if es_par(numero):
            print("Es par")
        else:
            print("Es impar")

    elif opcion == 3:
        print("Programa finalizado")

    else:
        print("Opcion invalida")

Funciones y responsabilidad única

Una buena práctica es intentar que cada función tenga una responsabilidad clara.

Por ejemplo, en lugar de crear una función enorme que muestre un menú, pida datos, calcule resultados y guarde información, podemos dividir esas tareas en varias funciones pequeñas.

Esto hace que el código sea más fácil de comprender y modificar.

Errores comunes al trabajar con funciones

  • Definir una función y olvidar llamarla.
  • Confundir print() con return.
  • Enviar una cantidad incorrecta de argumentos.
  • Intentar usar fuera de la función una variable local.
  • Olvidar devolver un resultado cuando se necesita.
  • Crear funciones demasiado grandes que hacen muchas tareas diferentes.

Cómo practicar funciones

Podés tomar ejercicios anteriores y reorganizarlos utilizando funciones. Por ejemplo:

  • convertir la búsqueda de un valor en una función;
  • crear funciones para calcular promedios;
  • separar las opciones de un menú;
  • crear funciones para validar datos;
  • hacer que una función reciba una lista y devuelva otra;
  • combinar varias funciones en un mismo programa.

Próximo paso: búsqueda y ordenamiento en Python

Ahora que podemos organizar nuestros algoritmos en funciones, el siguiente paso será estudiar algoritmos clásicos de búsqueda y ordenamiento implementados directamente en Python.

Seguí aprendiendo Python

Para repasar las estructuras que solemos pasar como parámetros, podés volver a Listas en Python.

Ahora que podés separar responsabilidades en funciones, continuá con:

Algoritmos de búsqueda y ordenamiento en Python →

Ver la ruta completa de Python


¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender Python, 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