Ir directamente al contenido de esta página

codexexempla.org

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ántico1 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?

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:

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). Volver
  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». Volver

Contacto

En virtud de la Ley Orgánica 15/1999 de Protección de Datos de Carácter Personal le informo de que los datos que proporcione no serán empleados para otro fin que el de responder a su mensaje. En especial, me comprometo a no cederlos a terceros ni a emplearlos para enviar información no solicitada.

Del blog de Digital Icon

(cc) CodexExempla.org, 2007–2017 Mapa del sitio | XHTML | CSS | AA