Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a Accesibilidad que contiene a Diseño web: Separar contenidos y formato

Datos de búsqueda

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: , , , , , .

Compartir este artículo:

  • Compartir en del.icio.us
  • Compartir en Technorati
  • Añadir a Google Bookmarks
  • Compartir en Google Buzz

Datos del artículo:

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Hay 2 comentarios a “Diseño web: Separar contenidos y formato”

RaGe dice:

Fecha de comentario: 2005/05/13 18:51

Yo creo que lo más importante a la hora de hacer una página es la habilidad para hacer un diseño que entre por los ojos, sin demasiada obsesion por ningun tipo de normalización.
¡LIBERACION DEL CODIGO YA!

Anonymous dice:

Fecha de comentario: 2005/06/10 13:43

Buen post, simple, breve y útil :o)

Una pequeña observación: Cuando dices:
[…]”El segundo es interpretado correctamente solo por navegadores normales”[…]

creo que se deberían puntualizar algunas cosas, por ejemplo, no existen navegadores “normales” sino habituales. Y en cualquier caso, se puede prescindir de la presentación elegida por el autor (colores, tamaños, etcétera,…) y en ese caso no se vería como el autor de la web quiere.

Y otra cosa muy importante: usando un marcado en el que se utiliza apropiadamente las etiquetas semánticas (títulos, negritas, enfasis,…) se logra una página web que fomenta la web semántica, y logrará mejores posiciones en los buscadores.

Enhorabuena por el blog!

Información del sitio