HTML5-Las etiquetas de texto.

Ya hemos visto todas las etiquetas nuevas que trae HTML5 para gestionar bloques, y ademas, darles contenido semántico.  Su utilización puede mejorar nuestro posicionamientos en buscadores, debido a  que al ser búsquedas mas precisas, los visitantes permanecen mas en nuestra pagina….pero HTML5 tiene mas.

Y ahora vamos a revisar las etiquetas que no tienen como misión especifica la gestión de bloques, algunas con significado semántico, y otras, con el único fin de gestionar los estilos, deberíamos poner especial cuidado en asignarlas, si queremos que nuestra pagina se indexe correctamente, y, sobre todo, pueda ser gestionada correctamente por los programas lectores para invidentes, y mejorar la accesibilidad

___Etiqueta___ Significado
< p > Bloque de párrafo, No tiene mas significado semántico que el que le da definir párrafo
< span >

Sin significado semántico, se utiliza para aplicar estilo a una parte especifica de una linea

< br/> Fuerza un salto de linea en el momento que se encuentra
< wbr />

Salto de linea condicional, en caso de llegar al final de linea, autoriza que se parta la frase en ese punto concreto, si no, el código no afecta, por lo que es posible indicarlo, incluso en medio de palabras.

< hr />

Tradicionalmente, se ha utilizado para dibujar una linea horizontal; ahora tiene el significado semántico de separar párrafos con contenido semántico distinto

< ol > Inicia un bloque de lineas (li) numeradas. Puede llevar dos parámetros:

  • start : que indica el primer numero que debe aparecer
  • reversed: que indicara que la numeracion, seguira orden inverso.

2014-08-18_18h04_38

< ul >

Inicia un bloque de lineas (li) no numeradas. funciona igual que «ol», pero no lleva ningún parámetro, y las lineas pueden aparecer con una marca, pero no se numeran

< li >  Contiene los elementos de las listas. Si esta dentro de una lista ordenada, puede contener un atributo «value» que forzara a que aparezca el numero que aquí se indique
 < dl >< dt >< dd >

 Este elemento (dl) es el contenedor de una lista descriptiva; y en su interior debe llevar  elemento: «dt» para anunciar el item, y «dd»  para describirlo.

Podemos combinar cualquier numero de elementos «dt» con cualquier numero de elementos «dd», pero nos hemos de preocupar de su coherencia.

Su estructura seria:
2014-08-18_18h06_41

 < strong />  Texto a resaltar sobre el contexto
 <b> Poner en negrita un texto, sin connotaciones semánticas
 < i >  Cursiva. Señala un aparte en el texto, porque sea un nombre, una voz en otro idioma, …..
 < em >  Enfasis. Semanticamente se utiliza para hacer hincapié en unas palabras.
 < dfn >  Esta etiqueta la utilizaremos para definir un termino. La definición, estará en el atributo «title» si existe, y si no, en el contenido circundante.
2014-08-18_18h12_21
 < small >  Pequeño comentario en un tamaño mas reducido
 < abbr >  Abreviatura, permite utilizar un atributo «title» para explicar el significado… especial importancia en el
entorno de title=»Pequeñas
y medianas empresas»>PYMES
que no han…..
 < cite >

Titulo de un trabajo que se cita. Atención, no es la cita, si no el trabajo, libro o documento del que se ha extraído la cita.

 < q >

Elemento en linea que representa el texto de la cita. Automáticamente el navegador colocara una comillas, cuyo aspecto lo deberemos controlar desde la hoja de estilos.

la etiqueta puede llevar un atributo «cite», en donde se le puede incluir la url de donde se ha extraído la información
2014-08-18_18h45_32

 < blockquote>

 Se trata de un bloque en donde se rompe la secuencia normal de lectura, ya porque sea un ejemplo, un texto traído de otra parte, o cualquier otro motivo

Cuando la cita es larga, se deberia utilizar este elemento en vez de «q» que esta pensado para citas cortas. Tambien dispone del atributo «cite» para indicar la dirección URL origen de dicho párrafo

 < ins >

 Señala texto insertado posteriormente a la publicación de la página, debería llevar un atributo «datetime» para indicar la fecha de la modificación. Si la inserción proviene de otra web, dispone del atributo «cite» para indicar la URL del origen

 < del >  Lo podemos utilizar para señalar un texto que se ha de dejar de tener en cuenta; en la web aparecerá como tachado
 < pre >  Se utiliza para mostrartextopreformateado; el navegador utilizara una tipografía de espacio fijo, y se respeta los espacios y saltos de linea que figuren en el origen.En este articulo, se ha utilizado la etiqueta

 cuando se han mostrado ejemplos.
 <code>  Indica que el contenido que viene a continuación es código informático. Algún ejemplo de programas, …..) habitualmente, nos lo encontraremos dentro de un «pre», ya que esta etiqueta no modifica la visualización
 < samp >  Elemento inline que indica la respuesta de un programa, un error,
…. 2014-08-18_18h49_46
 < kbd >  Elemento inline para señalar un dato que el usuario ha de teclear.Se trata de un convenio para explicar en sistemas de accesibilidad lo que se quiere explicar. Podriamos decir:… y cuando el programa termine,
aparecera en pantalla un campo de
entrada en el que tendremos que teclear
Yes para autorizar…
 < var >  Cuando tenemos que hablar de una variable, tanto sea informática, como matemática, deberíamos rodearla con esta etiqueta, para reforzar su identificación.
 < sub >
< sup >
 Indica subindices y superindices, aunque su utilización es netamente en entorno de formulas, podemos utilizarlo en cualquier sitio donde necesitemos dejar notas.
2014-08-18_18h50_41 nos muestra la
formula del agua…2014-08-18_18h51_56
 < mark >  Simula el texto marcado con un rotulador. Resalta texto
 < time >  Permite especificar una fecha que puede ser localizada por cualquier buscador. Puede aparecer dentro de cualquier bloque, y establece la fecha para ese bloque.Tiene el atributo «pubdate» para indicar que se refiere a fecha de publicacion, y «datetime» que es el que se debe de indicar la fecha y la hora.

Alguna de ellas ya las hemos utilizado en los ejemplos, y otras lo haremos en los siguientes artículos. De momento, se trata que las conozcáis, y sepáis para que sirven.

En el siguiente capitulo, revisaremos un tema de wordpress, que construimos aquí, para ver como podemos hacerlo semanticamente corecto

Acerca de Miguel Garcia

Programador, Desarrollador web, Formador en distintas areas de informatica y director de equipos multidisciplinares.
Esta entrada fue publicada en Desarrollo Web, Diseño, Formacion, HTML5 y etiquetada , , . Guarda el enlace permanente.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.