Semántica y accesibilidad HTML

Por 26 noviembre, 2020Desarrollo web, Front End

Revisando webs a diario puedo confirmar que se ha perdido la esencia al realizarlas. Pienso que mucho tiene que ver porque hacemos foco en frameworks JavaScript, Php, o el que sea, y nos olvidamos de qué el estándar comprendido por el navegador (uno de los estándares) es HTML.

Es por eso que creo interesante dejar un resumen de lo que considero buenas prácticas HTML, indistintamente del framework que utilicemos, si es web termina renderizando HTML.

La semántica en el HTML refiere al significado o información que otorgan los elementos del lenguaje, información que define o describe el contenido, función o sección que contienen.
Esta información permite que un documento se pueda entender de mejor manera, el contenido se muestre de forma consistente en diferentes aplicaciones y contextos, además de ser fundamental para otorgar accesibilidad y funcionalidad con tecnología de asistencia como lectores de contenido.

Bien, ¿Y cuál sería esta estructura correcta?
Si partimos de una estructura básica, debemos saber que HTML5 sumó nuevas etiquetas para poder dividir de una mejor manera el contenido. Estructura que paso a mostrar:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <a href="/"><img src=logo.png alt="home"></a>
        <h1>Title</h1>
        <h2 class="tagline">
            A lot of effort went into making this effortless.
        </h2>
    </header>
    <nav>
        <ul>
            <li><a href="#">home</a></li>
            <li><a href="#">blog</a></li>
            <li><a href="#">gallery</a></li>
            <li><a href="#">about</a></li>
        </ul>
    </nav>
    <main>
        <section class="about-us">
            <h2>About Us</h2>
            <div class="content">
                Content goes here...
            </div>
        </section>
        <section class="contact">
            <h2>Contact</h2>
            <div class="content">
                Content goes here...
            </div>
        </section>
        <section class="articles">
            <h2>Articles</h2>
            <div class="content">
                <article class="article">
                    <time datetime="2009-10-22">October 22, 2009</time>
                    <h3>
                        <a href="#" title="link to this post">Travel day</a>
                    </h3>
                    <div class="article__content">
                        Content goes here...
                    </div>
                    <section class="article__comments">
                        <p><a href="#">3 comments</a></p>
                    </section>
                </article>
            </div>
        </section>
    </main>
    <aside>
        <div class="related"></div>
        <div class="related"></div>
        <div class="related"></div>
    </aside>
    <footer>
        <p>&#167;</p>
        <p>&#169; 2020 <a href="#">25Watts</a></p>
    </footer>
</body>
</html>

A simple vista podemos observar el uso de <header>, <main>, <section>, <article>, <nav>, <aside> y <footer>. Estos elementos permiten dividir el contenido en áreas de pesos que son importantes no solo para la accesibilidad, sino que también lo son para el posicionamiento SEO.

Debajo les dejo la especificación de cada elemento para que puedan comenzar a utilizarlo en sus próximos proyectos.

  • <main> encierra el contenido particular a esta página. Utilizaremos <main> solamente una vez para cada página y lo situaremos directamente dentro del elemento <body>. Es mejor que no lo anidemos en otros elementos.
  • <article> encuadra un bloque de contenido que tiene sentido por sí mismo aparte del resto de la página (por ejemplo una entrada en un blog).
  • <section> es parecido al elemento <article>, pero se usa más para agrupar cada parte de la página que, por su funcionalidad, constituye una sección en sí misma (por ejemplo un minimapa o un conjunto de titulares y resúmenes). Se considera una buena práctica comenzar cada una de estas secciones con un título de encabezado (heading); observa que podemos subdividir artículos (<article>) en distintas secciones (<section>), o también secciones en distintos artículos, dependiendo del contexto.
  • <aside> incluye contenido que no está directamente relacionado con el contenido principal, pero que puede aportar información adicional relacionada indirectamente con él (resúmenes, biografías del autor, enlaces relacionados, etc.).
  • <header> representa un grupo de contenido introductorio. Si este es «hijo» de un elemento <body>, se convertirá en el encabezado principal del sitio web, pero si es hijo de un elemento <article> o un elemento <section>, entonces simplemente será el encabezado particular de cada sección (por favor, no lo confundas con títulos y encabezados).
  • <nav> contiene la funcionalidad de navegación principal de la página. Los enlaces secundarios, etc., no entrarán en la navegación.
  • <footer> representa un grupo de contenido al final de una página.