Ir directamente al contenido de esta página
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?
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:
title
o un h1
tienen más peso relativo para el posicionamiento de una página que un texto marcado con un mero font
.class
con los que se tiene que acribillar un código mal estructurado para darle estilo, sino en la aplicación de selectores avanzados.2