En el post de hoy te presentaré una técnica avanzada de desarrollo web: la maquetación semántica. Por si no lo sabías, es una herramienta fundamental a la hora de mejorar la accesibilidad, el SEO, la mantenibilidad y la experiencia de usuario en tu sitio. Así que, si aún no la implementas, debes saber que te estás perdiendo de una gran oportunidad para optimizar la manera en que, los usuarios y los motores de búsqueda, perciben tu web.

¿Qué encontrarás en este post?

¿Qué es la maquetación semántica?

La maquetación semántica es muy sencilla de entender. Con esta técnica, aparte de estructurar visualmente un sitio web, se le da prioridad al uso correcto de las etiquetas HTML para poder darle significado al contenido. Como ya te comenté, esta práctica mejora considerablemente la apariencia de una web e influye en la accesibilidad, el SEO y la mantenibilidad del código.

¿Cómo funciona la maquetación semántica?

Para que puedas implementar correctamente la maquetación semántica, debes saber cómo funciona. Resulta que, en lugar de utilizar etiquetas genéricas como <div> o <span> para todo, lo que se hace es aprovechar las etiquetas más específicas que describen claramente el contenido que envuelven. ¿Cómo? Aquí te lo muestro:

Cuando vayas a hacer un encabezado, usa <header>.
Si se trata de un artículo, simplemente usa <article>.
Para una barra de navegación, lo ideal es que uses <nav>.

Como ves, se trata básicamente de llamar las cosas por su nombre. Así, los motores de búsqueda como las tecnologías de asistencia (lectores de pantalla) pueden interpretar de una mejor manera el contenido y la estructura de la página. Su importancia radica en que Google y otros buscadores, prefieren sitios que estén bien organizados y accesibles ya que esto influye directamente en el posicionamiento web.

¿Cómo me ayuda la maquetación semántica a mejorar mi web?

Una vez que implementes la maquetación semántica en tu sitio web, te darás cuenta de que tiene múltiples ventajas:

Mejora el SEO

Google y otros buscadores valoran el contenido que está bien estructurado. Al utilizar etiquetas semánticas, estás facilitando que los motores de búsqueda entiendan mejor de qué trata tu web, lo que puede ayudarte a mejorar tu posicionamiento y, por ende, aumentar el tráfico.

Aumenta la accesibilidad

Recuerda que no todos los usuarios navegan de la misma forma. Algunas personas dependen de tecnologías de asistencia como lectores de pantalla, y la maquetación semántica les permite navegar de una mejor manera. Cuando haces tu web más accesible, no solo estás beneficiando a estos usuarios, sino que también estás contribuyendo a una mejor experiencia de usuario en general.

Fácil mantenibilidad

Un código que sigue las pautas de la maquetación semántica es mucho más fácil de mantener. Si tú, o cualquier otro desarrollador, tienen que modificar la web en el futuro, será más sencillo entender la estructura del sitio y hacer cambios sin complicaciones. Esto se traduce en ahorro de tiempo y esfuerzo a largo plazo.

Optimiza la experiencia de usuario

La maquetación semántica ayuda a que los usuarios encuentren la información que necesitan más fácilmente. Al tener una estructura clara y coherente se mejora la usabilidad y también aumentan las posibilidades de que los usuarios regresen a tu sitio. Si los usuarios tienen una buena experiencia, es más probable que interactúen más con tu contenido y que recomienden tu web.

Ejemplo práctico

Imagina que tienes que crear una página de inicio para un blog de tecnología. El contenido básico de esta página podría incluir un encabezado, un artículo principal, una barra de navegación y un pie de página. Aquí te muestro cómo puedes estructurar este contenido usando la maquetación semántica.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog de Tecnología</title>
</head>
<body>

    <!-- Encabezado -->
    <header>
        <h1>Bienvenido al Blog de Tecnología</h1>
        <nav>
            <ul>
                <li><a href="#">Inicio</a></li>
                <li><a href="#">Artículos</a></li>
                <li><a href="#">Sobre nosotros</a></li>
                <li><a href="#">Contacto</a></li>
            </ul>
        </nav>
    </header>

    <!-- Sección principal con artículos -->
    <main>
        <article>
            <h2>La revolución de la inteligencia artificial en 2024</h2>
            <p>La inteligencia artificial ha avanzado enormemente en los últimos años, transformando industrias como la salud, la educación y el marketing...</p>
            <footer>
                <p>Publicado el 6 de septiembre de 2024 por Juan Pérez</p>
            </footer>
        </article>

        <article>
            <h2>Los lenguajes de programación más populares del año</h2>
            <p>En 2024, los lenguajes de programación como Python, JavaScript y Go han ganado popularidad gracias a sus diversas aplicaciones en desarrollo web, ciencia de datos...</p>
            <footer>
                <p>Publicado el 1 de septiembre de 2024 por María López</p>
            </footer>
        </article>
    </main>

    <!-- Barra lateral -->
    <aside>
        <h3>Artículos populares</h3>
        <ul>
            <li><a href="#">5 consejos para aprender Python rápido</a></li>
            <li><a href="#">Guía para desarrollar apps con Flutter</a></li>
            <li><a href="#">Cómo iniciarse en la ciberseguridad</a></li>
        </ul>
    </aside>

    <!-- Pie de página -->
    <footer>
        <p>&copy; 2024 Blog de Tecnología. Todos los derechos reservados.</p>
    </footer>

</body>
</html>

Código explicado:

<header>: Contiene el título del blog y la barra de navegación. En lugar de usar etiquetas genéricas como <div>, se utiliza <header> para indicar que es la cabecera de la página.
<nav>: Aquí se incluye la barra de navegación con los enlaces del menú. El uso de <nav> le dice a los motores de búsqueda que esta sección es una barra de navegación.
<main>: Envuelve el contenido principal de la página. Indica que esta es la sección central, diferenciándola de otros contenidos auxiliares como la barra lateral o el pie de página.
<article>: Cada entrada de blog se coloca dentro de una etiqueta <article>, lo que le dice a los motores de búsqueda y lectores de pantalla que se trata de un contenido independiente y significativo.
<footer>: Tanto el artículo como la página en general tienen un pie de página, lo que proporciona un cierre semántico para cada contenido.
<aside>: La barra lateral, que contiene enlaces a artículos populares, está envuelta en un <aside>. Esto indica que se trata de contenido adicional o complementario al principal.

Si te interesa aprender más sobre cómo crear sitios web que no solo sean visualmente atractivos, sino también accesibles, optimizados para SEO y fáciles de mantener, no dudes en apuntarte al Bootcamp de Desarrollo Web de KeepCoding. En este programa intensivo, te formarás con las últimas tecnologías y buenas prácticas, adquiriendo las habilidades necesarias para cambiar tu vida y empezar una carrera exitosa en el sector tecnológico, donde la demanda de profesionales es alta y los salarios son aún mejores. ¡Es tu oportunidad de destacar en el mundo IT!