Elemento SPAN

span: elemento de línea

Hemos visto elementos como strong o em utilizados para marcar fuerza o enfatizado respectivamente. Existe un elemento genérico de agrupación en línea llamado span. Con él podemos agrupar un conjunto de palabras por algún criterio especial que se nos ocurra. Y luego podremos aplicar a todas ellas estilos mediante clases.

La idea es sencilla veamos un ejemplo:

<span class="tipos_fruta">frutas de hueso</span> <span class="ejemplo_fruta">albaricoque</span> <span class="ejemplo_fruta">melocotón</span> <span class="tipos_fruta">fruta de pepita</span> <span class="ejemplo_fruta">pera</span> <span class="ejemplo_fruta">manzana</span>

En este sencillo y vegetal ejemplo, utilizamos span para agrupar frases según dos criterios semánticos humanos: tipos de frutas y ejemplos de frutas. A cada una de éstos elementos lo hacemos pertenecer a una clase, la cual nos facilitará la aplicación de estilos a todos los elementos que pertenezcan a esa clase.

Los agentes de usuario no suelen representar de manera diferente al texto en el renderizado de la etiqueta span.

Lo anterior renderizado por tu navegador se ve así:

frutas de hueso albaricoque melocotón fruta de pepita pera manzana

Por esto uno se podría preguntar cual es su utilidad, más allá de su significación semántica. Aquí entra en juego la utilización de CSS para dotar de presentación nuestros contenidos.

Los estilos podemos definirlos en un archivo de texto plano independiente de nuestro documento XHTML o bien incluirlo en el mismo marcado con el elemento style dentro de la sección head.

<head>

...

<style type="text/css">
  .tipos_fruta {
  color:#FF0000;
  text-decoration:underline;
  }

  .ejemplo_fruta {
  color:blue;
  font-size:80%;
  }

</style>

...

</head>

Tu agente de usuario interpreta y renderiza de la siguiente manera los estilos anteriores:

frutas de hueso albaricoque melocotón fruta de pepita pera manzana

Hemos logrado no sólo una agrupación semántica sino una presentación personalizada para todos los elementos agrupándolos por clases, y sin embargo hemos mantenido una separación entre el contenido y la presentación, que es uno de los objetivos fundamentales del XHTML.

Página principal

1 aporte(s) de lectores:

Anonymous Anónimo aporta...

excelente , esta muy entendible gracias por este tipo de ayudas

9:21 p.m.  

Publicar un comentario

ATENCIÓN: Por favor intenta aportar o preguntar sobre el tema que trata la página. Otro tipo de consultas o criticas puedes dejarlas en el libro de visitas. Los aportes y preguntas están moderados simplemente para evitar spam o comentarios fuera de lugar.