Logotipo de Aprende Gratis.

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

Dos párrafos en html con estilos lógicos
Figura 11. Estilos lógicos para
presentar el texto.

Ir a:


Aprende Gratis 2017 © Mario Raja | página web responsive.