HTML - Lección 8: Los estilos lógicos
En esta lección veremos los estilos lógicos para el texto escrito en html. La diferencia con los estilos físicos es que los lógicos tienen un significado intrínseco, es decir, podemos dar un estilo característico según queramos enfatizar texto, o escribir código o citar las palabras de alguién.
En concreto, los estilos lógicos poseen un significado semántico. Esto quiere decir que podemos dar un diseño determinado al texto para comunicar al lector que clase de texto está leyendo, por ejemplo, un texto enfatizado, una cita (texto que reproduce las palabras de otra persona) o un código de un determinado sostware.
En la siguiente tabla se muestran las etiquetas para manejar estos estilos lógicos:
| Etiquetas html para los estilos lógicos | |
|---|---|
<strong></strong> |
Para resaltar el texto. |
<em></em> |
Para enfatizar el texto. |
<code></code> |
Para indicar código fuente de un programa. |
<cite></cite> |
Para citar palabras textuales de otra persona. |
<dfn></dfn> |
Para escribir definiciones. |
Si te has fijado, a lo largo de este curso se ha ído escribiendo etiquetas html a lo largo del texto y, como se puede observar, éstas tienen un tipo de letra distinto. Esto es así porque se le dan estilos lógicos; en concreto, se le aplica la etiqueta <code>.
Existe otra peculiaridad, hay estilos lógicos que, en diseño, coinciden con estilos físicos. Por ejemplo, la etiqueta <strong> (estilo lógico) resaltaría el texto poniéndolo en negrita. Por otro lado, ya sabemos que la etiqueta <b> (estilo físico) pone el texto en negrita. No quiere decir esto que ambas etiquetas html hagan lo mismo; simplemente es que el navegador resalta el texto por defecto poniéndolo en negrita.
El siguiente código utiliza los estilos lógicos para enfatizar el texto o mostrar palabras textuales de otra persona:
<body> <p><strong>Internet</strong> es un nuevo medio para la comunicación. Se trata de una <em>herramienta potentísima</em> que permita la conexión de los ordenadores de todo el mundo. Esto ayuda a una comunicación instantánea.<p> <p><cite>Estoy seguro que internet cambiará el mundo</cite></p> </body>
... y así lo mostrará el navegador...
Figura 11. Estilos lógicos para
presentar el texto.
Ir a:
