Código semántico

Como ya comenté antes en la introducción a XML, la idea básica sobre la que se desarrolló HTML era que el código estructurase los contenidos y les añadiese significado desde el punto de vista de su organización. Básicamente, el código semántico¹ es aquel en el que los elementos marcan los contenidos de acuerdo con su estructura. En otras palabras, producir código semántico es algo tan simple como marcar encabezados, párrafos, citas, listas, definiciones, etc., con su elemento adecuado, y que los identificadores y clases aplicados al código tengan nombres significativos.

Pongamos un ejemplo de código no semántico, al que por desgracia hasta ahora estábamos muy acostumbrados:

    <table width="200" style="border-top:1px solid #900;border-bottom:1px solid #900;">
        <tr>
            <td style="border:none;background-color:#CCC;">
                <p class="14pxNegroSubrayado">Destacados</p>
                <p>Párrafo con los contenidos destacados de una sección concreta.</p>
                <p>Otro párrafo con los contenidos destacados de una sección concreta.</p> 
            </td>
        </tr>
    </table>
            

¿Cúales son los errores del ejemplo desde el punto de vista semántico?

• Se ha empleado una tabla para maquetar el contenido, cuando las tablas se crearon para marcar semánticamente datos tabulares.
• El encabezado se ha marcado como un párrafo, y no como un encabezado.
• Además, es cierto que se ha aplicado un atributo class para asignarle un estilo en lugar del antes omnipresente font, pero el nombre de esta clase no es significativo de la función estructural del elemento, sino que recoge su estilo.

Correctamente marcado, este fragmento de código sería algo así:

    <div id="destacados">
        <h1>Destacados</h1>
        <p>Párrafo con los contenidos destacados de una sección concreta.</p>
        <p>Otro párrafo con los contenidos destacados de una sección concreta.</p>
    </div>
            

Y los estilos se aplicarían gracias a selectores avanzados de CSS.

¿Y por qué marcar semánticamente el código? Bueno, el motivo de que porque así está bien hecho y es como lo debería hacer un profesional debería bastar, pero además ofrece una serie de ventajas:

• Se logra que la información esté estructurada de una forma lógica y significativa para el usuario, incluso en los casos en los que por algún motivo la hoja de estilo no se encuentre disponible. Es especialmente importante si tenemos en cuenta que los encabezados son puntos de referencia sobre los que se estructura el escaneado de una página, puesto que el usuario medio, como ha puesto de relieve Jakob Nielsen en su experimento sobre patrones de lectura (inglés), inicialmente escanea la información en lugar de leerla.
• Como describe el contenido independientemente de su presentación, la estructura del documento se transmite junto con su contenido para cualquier dispositivo del lado del usuario.
• En términos generales, da como resultados documentos web menos pesados, lo que mejora la velocidad de transmisión y reduce el trabajo del servidor, además de ser un alivio para el usuario impaciente.
• Los buscadores en parte lo entienden, porque valoran las jerarquías que se crean por medio de los elementos de marcado. Es el motivo por el que en Google, por ejemplo, las palabras de un title o un h1 tienen más peso relativo para el posicionamiento de una página que un texto marcado con un mero font.
• Facilita el mantenimiento de los documentos, puesto que las secciones están marcadas de forma significativa para un ser humano.
• Simplifica las CSS, puesto que reduce la cantidad de reglas que hay que crear, ya que su aplicación no se basa en los atributos class con los que se tiene que acribillar un código mal estructurado para darle estilo, sino en la aplicación de selectores avanzados.²
• Identifica claramente cada elemento del documento, lo que permite después crear comportamientos con JavaScript que empleen esos identificadores de forma eficiente.

Notas

1. Aunque alguna una relación desde la filosofía que los inspira, no se debe confundir el código semántico con la Web semántica. La Web semántica de la que hablan los teóricos supone una serie de lenguajes de marcado que buscan que los contenidos sean significativos no tanto para seres humanos, sino para aplicaciones, en especial buscadores y aplicaciones web. En esta dirección es en la que el W3C está dirigiendo recomendaciones como RDF (inglés) u OWL (inglés).
2. Esto lleva a la enunciación de la Primera Ley Inmutable de CSS: «Si no eres capaz de hacer un buen marcado, tu hoja de estilo será una mierda».