Diseño web: Separar contenidos y formato

Hasta no hace mucho el método más habitual para dar formato a un sitio web (me refiero a tipografías, colores, etc.) era meter dicho formato dentro del código. Etiquetas como FONT y BR eran muy habituales.

Es mejor meter etiquetas para dar significado o estructuración al texto. Por ejemplo, H1 se solía utilizar para dar a los textos un tamaño determinado, pero en realidad esa no es su función. Es un elemento estructural. Voy a poner dos ejemplos de código, que visualmente dan un resultado similar. El primero tiene estructura correcta, pero el segundo no. Aquí están:

<h1>Tema 1</h1>
<p>Introducción</p>
<h2>Punto secundario</h2>
<p>Texto importante</p>

<font size="7">Tema</font><br />
Introducción<br /><br />
<font size="6">Punto secundario</font><br />
Texto importante<br />

Y la pregunta que os hareis será: ¿Y no da igual uno que otro? Pues no. El primero es interpretado sin problemas en practicamente cualquier navegador, incluso los de dispositivos móviles o los utilizados por personas con discapacidad visual. El segundo es interpretado «correctamente» solo por navegadores habituales, y da problemas con los mencionados anteriormente. Además este segundo método hace que para cambiar el aspecto de todo un sitio haya que ir editando página por página, mientras que el otro método permite que modificando una hoja de estilo asociada se pueda cambiar el aspecto del sitio.

Nota: actualizado 2005-06-10.

Tags: , , , , , .