Paso 18.- Líneas horizontales.
Vamos a poner una línea marcar la división entre los "post". Las líneas horizontales, marcadas con la etiqueta <hr>, pueden resultar sosas y aburridas, así que, en su lugar queremos colocar una imagen. Eso funciona y puede ser hecho accesible fácilmente añadiendo el atributo "alt" adecuado.
Pero si queremos respetar la semántica correcta podemos utilizar las características de la hoja de estilo para realizarlo. De esa manera, con los nuevos navegadores se mostrará nuestra imagen decorativa utilizada como línea horizontal. Los navegadores más antiguos y los navegadores sólo texto ignorarán el CSS y sólo mostrarán una línea horizontal en su estilo propio.
Si nos limitamos a poner una imagen en sustitución de la línea horizontal, será tan sencillo como colocar el código siguiente:
Como ya dije, esta solución no plantea problemas de accesibilidad, pero atenta contra la semántica propia del lenguaje de marcado de hipertexto (HTML). Así que la solución más correcta será vía hoja de estilo.
Como el soporte de los navegadores a las etiquetas <hr> es extraño, usaremos una etiqueta <div> sencilla para mostrar la imagen. En la hoja de estilo colocaremos el siguiente código:
Con esto hecho, ya podemos colocar nuestra línea decorativa en el lugar oportuno del código fuente poniendo:
Pero si queremos respetar la semántica correcta podemos utilizar las características de la hoja de estilo para realizarlo. De esa manera, con los nuevos navegadores se mostrará nuestra imagen decorativa utilizada como línea horizontal. Los navegadores más antiguos y los navegadores sólo texto ignorarán el CSS y sólo mostrarán una línea horizontal en su estilo propio.
Si nos limitamos a poner una imagen en sustitución de la línea horizontal, será tan sencillo como colocar el código siguiente:
En el atributo "alt" no hace falta poner 80 ó 90 guiones. Basta con colocar 2 ó 3 y será suficiente. Ten en cuenta que el lector de pantalla leerá para cada guión la palabra "guión". ¿No querrás que el visitante pase un minuto oyendo "guión, guión, guión,...?
<img src="/imagenes/LineaDecorativa.jpg" alt="--" title="">
Como ya dije, esta solución no plantea problemas de accesibilidad, pero atenta contra la semántica propia del lenguaje de marcado de hipertexto (HTML). Así que la solución más correcta será vía hoja de estilo.
Como el soporte de los navegadores a las etiquetas <hr> es extraño, usaremos una etiqueta <div> sencilla para mostrar la imagen. En la hoja de estilo colocaremos el siguiente código:
Donde la altura (heigth) debe ser la de la imagen que vamos a colocar como divisor y en background-image colocaremos la dirección donde se ubica.
div.hr {display:none}
/*/*/a{}
div.hr{
display: block;
height: 25 px;
background-image: url(/imagenes/LinedaDecorativa.jpg);
background-repeat: no-repeat;
background-position: center center;
margin: 1em 0 1em 0;
}
hr {display: none}
/* */
Con esto hecho, ya podemos colocar nuestra línea decorativa en el lugar oportuno del código fuente poniendo:
Los resultados serán:
<div class="hr"></div><hr />
- Todos los navegadores visuales modernos mostrarán la imagen en lugar de la línea horizontal plana normal.
- Algunos navegadores antiguos, como Nestcape 4, mostrarán una línea horizontal normal.
- Los navegadores sólo texto siempre ignoran la hoja de estilo, por lo que mostrarán una regla horizontal formada por guiones normales o de subrayado.
<< Home