Diseño Semántico: El medio y el mensaje

Escrito por Kemie Guaida en 21.10.04

Al trabajar con xhtml y css, la idea es poder separar el contenido de la presentación. Por eso es especialmente importante que el código esté bien estructurado y describa el contenido , es decir, que sea semánticamente correcto.

Tal vez hayas oido hablar por ahí del "código semántico" o "diseño semántico". Suena imponente, ¿no? Pero ¿que es? ¿Ysirve para algo más que impresionar a tus colegas clavados?

Empecemos por definir semántica:

Semántica: Proviene del griego "semantikos", que quería decir "significado relevante", derivada de "sema", lo que significaba "signo") Se dedica al estudio del significado de los signos lingüísticos y de sus combinaciones, desde un punto de vista sincrónico o diacrónico. (definición de wikipedia)

O sea que la semántica, aplicada a la web, tendría que ver con el significado de las cosas, y de las relaciones de unas con otras. Parecería que esto no tiene nada que ver con un diseñador o desarrollador, sino de quien se encargue del contenido. Pero el contenido no es lo unico que tiene un significado. El codigo que usas para estructurar y presentar este contenido también lo tiene, y es importante que esté de acuerdo con el contenido.

El html es un lenguaje que da estructura a un documento a través de etiquetas. Por ejemplo, al poner las etiquetas <p> y </p> alrededor de un texto, estamos designando ese texto como un párrafo. Al usar las etiquetas <em> y </em> denotamos énfasis.

Muchos desarrolladores y diseñadores no ponemos mucha atención a estos elementos, simplemente tratamos de que la estructura sea visible en la página, sin preocuparnos por el codigo.

<p>un texto</p>
<p>otro texto</p>

se ve practicamente igual que

un texto
<br><br>
otro texto

Sin embargo, el primer bloque tiene un significado que el segundo no tiene.

Ventajas de usar código semántico

Describe el contenido.
Es independiente de la forma en que es presentado. Eso permite, por ejemplo, el poder tener diferentes estilos para un mismo documento, o presentar más fácilmente el contenido en diferentes tipos de medios, como palms, o para impresión.
Es más fácil de mantener. Si tu código es lógico, es mucho más fácil encontrar elementos y cambiarlos. Esto es especialmente importante cuando un equipo de trabajo debe de trabajar en el mismo documento.
Es más accesible, ya que navegadores de solo texto, lectores de pantalla, y navegadores viejos, o sin javascript u otras tecnologías pueden entenderlo.
Los buscadores lo entienden. Google, por ejemplo, da mayor importancia a las palabras en encabezados. Y google no entiende que <font size="14" color="red">Mi título</font>es un encabezado... sin embargo entiende perfectamente que <h1>Mi título</h1>
El código semántico por lo general es más simple y hace que las páginas carguen más rápido.

En la práctica

La forma más sencilla de entender el código semántico es usar cada elemento de html para el propósito que se pensó, y separar el contenido de la presentación.

Por ejemplo:

Para un título, utiliza encabezados (headings), tales como h1, h2, h3...
Para párrafos, utiliza el elemento <p>
Para listas, el elemento <li>
Utiliza tablas solamente para información tabular, no para acomodar elementos de tu página.
Utiliza siempre hojas de estilo para definir tu presentación.
Trata de usar las imágenes que no sean contenido como fondo de tus elementos, definidos en hojas de estilo.
En tus hojas de estilo, nombra tus ids y clases de una manera clara, de acuerdo al contenido y no a la presentación. Por ejemplo, #pr1 no tiene ningún valor semántico, mientras que #tituloprincipal si; si nombras una clase .azul... qué pasa el dia que lo quieres cambiar por rojo? .enfasis, por ejemplo, funciona mejor.

Para concluir

La coherencia entre los significados de nuestro contenido y nuestro código creará una estructura lógica que hará que nuestro contenido sea entendido más fácilmente independientemente de la presentación, medio o estilo en el que se vea. Además hará mucho más facil el crear y mantener nuestro código.

¿Quieres un ejemplo práctico? Lee este tutorial.

Enlaces Relacionados

Simplequiz: Una serie de debates sobre la mejor manera de usar código en distintas situaciones .
No hagas trampa en tu código: como utilizar código semántico con CSS.
Estándares, semántica...y dinero: cómo ahorrar dinero y diseñar bien al mismo tiempo

Comentarios

23 octubre 2004, 22:45Zeta
Excelente explicación Kemie
5 noviembre 2004, 22:59Corsaria
Muy bien explicado, sencillo y fácil de entender. :)
9 noviembre 2004, 05:38lowprofile
Que maravilloso hallazgo este blog!
Me propongo leerlo todito artículo por artículo.
11 noviembre 2004, 23:15juque
Bueno el artículo pero debiste praticar con el ejemplo y no usar <p> cuando listaste Ventajas y Prácticas, para eso está <li> no crees?
11 noviembre 2004, 23:25kemie
jajaja, excelente punto juque, ahora lo corrijo :)
12 noviembre 2004, 02:44Nelson Rodríguez-Peña
Hola Kemie,

antes que todo, felicitaciones, muy buen artículo, pero no resisto la tentación de hacer un par de alcances:

– para listas usa OL, UL o DL
– el nobre de las clases no tiene ningún valor semántico: para que lo tuviera debería estar declarado en el DTD. Entiendo que a lo que te refieres es a que no se utilicen nombres que representes aspectos visuales, que se utilicen nombres con sentido.

Hace un tiempo atrás escribí sobre este mismo tema, te invito a que le des un vistazo y comentes también.
12 noviembre 2004, 05:30Dustin Diaz
Eh, que pasa.
he encontrado este site y nunca sabia que hay otros diseñadores en el ‘blogsphere’

Habia escrito un articulo similar muy similar como este se llama Search Engine Optimization for Developers. Hablo sobre las mismas cosas.

Fuera de eso, bien hecho.
Dustin
12 noviembre 2004, 23:33AM
hace tiempo que visito tu sitio y realmente estoy intrigado por las ramificaciones de estas tecnologías en nuestro “modelo” de trabajo. Saludos
22 enero 2007, 19:47lorena

que bien es este articulo esta de pelos. muchos saludos
4 mayo 2007, 03:10jhony192

Feedbak
“http://es.wikipedia.org/wiki/Diseño_semántico”:http://es.wikipedia.org/wiki/Diseño_semántico
Acabo de publicar un esbozo acerca del diseño semántico, si tiene usted un ratico y ofrece a la red un poco de texto libre para la wikipedia sería de mucha ayuda a generaciones futuras.
Gracias :)
13 diciembre 2007, 21:01Alvaro Cabrera

Bien, ahora se por donde empezar… xD
5 abril 2008, 20:57josedelaranda

Muy bien explicado, debemos acostumbrarnos a escribir un código semántico, saludos