comparte el articulo 

5 etiquetas semánticas que deberías empezar a utilizar

Actualizado el 04/12/2013 < > 0 Comentarios

Resumen: HTML es un lenguaje cada vez más semántico. El uso de estos elementos es una buena forma de empezar a escribir más limpio y tener un marcado más accesible.

En la web actual, el término semántica se maneja en cada espacio de aprendizaje disponible, varios cursos y autores nos mencionan que la semántica es un factor muy relevante para la composición del tipo de sitios que se debe de ofrecer al usuario en la actualidad. El HTML semántico se encarga de expresar el significado del documento, se preocupa menos por la forma en que se ve el texto y más por lo que es. Un buen etiquetado semántico permite una mejor comprensión del contenido y contexto de una página, tanto por parte de las personas como de las máquinas.

El marcado de etiquetas semántico es mucho más accesible y fácil de interpretar para los lectores de pantalla (software que trata de identificar e interpretar aquello que se muestra en pantalla), es más amigable con el SEO y funciona mejor con los navegadores modernos. Además de esto, tiene los beneficios de que reduce la cantidad de código necesario para expresar el contenido y aumenta la claridad del código para otras personas que tienen que leerlo.

Si bien el manejo del código semántico es muy favorable, como no tiene una representación visual muy notable, pocos hacen uso de él. Una de las mejores maneras de empezar a escribir un mejor código semántico, es reemplazar las etiquetas genéricas con elementos más expresivos. En este artículo, echaremos un vistazo a cinco de estas etiquetas, las cuales se pueden utilizar para facilitar la interpretación de nuestro código.

q

La etiqueta q es una abreviación de quote o quotation, la cual, como su nombre lo indica, es utilizada para mostrar citas. A diferencia de blockquote, el elemento q es utilizado para definir y contener frases cortas.

Pero ¿Para qué necesitamos una etiqueta de citas? ¿Por qué no simplemente utilizar comillas que cubran la frase? Tienes que tener en mente que las comillas no siempre implican, denotan o representan a una cita, a veces son utilizadas para dar énfasis, ironízar, o para identificar el nombre de algo. En esos casos, el uso de comillas directamente en el contenido es perfectamente válido. Sin embargo, si tú estás citando a alguien dentro de tu codigo, q muestra explícitamente su significado.

Los navegadores modernos saben interpretar a este elemento, por lo que puedes definir un estilo a través de CSS.

i y b

Hace un tiempo atrás, las etiquetas i y b eran muy utilizadas por los desarrolladores cuando era necesario darle un cierto estilo a los textos que se mostraban en la página, i hace que el texto se muestre de forma itálica o cursiva, mientras que b hace que se resalte el texto en forma negrita.

Esta popularidad imperó hasta que surgieron nuevas prácticas, las cuales proponían la separación entre el contenido semántico y la presentación de los elementos, con ello se dió la idea de disgregar el estilo del resto del código, por lo que utilizar los elementos i y b se convirtió en algo mal visto ya que representaban la presentación del texto, en lugar de lo que significaba. Con el tiempo, fueron reemplazados por las etiquetas em y strong, las cuales indican enfásis en un texto.

Con HTML5 i y b regresaron, pero ahora tienen nuevos significados semánticos. La etiqueta i se utiliza para enmarcar el texto que denota algo distinto o un estado de ánimo, lo cual resulta útil para representar cosas como pensamientos y términos técnicos. La etiqueta b por su parte, representa texto que es estilísticamente diferente de texto normal, pero no tiene ningún significado semántico diferente. A diferencia de span, b comunica al lector una falta de significado semántico.

abbr

La etiqueta abbr es utilizada para contener abreviaciones, lo cual puede resultar bastante útil cuando exponemos documentos de corte académico o periodístico. Esta etiqueta cuenta con un atributo de uso opcional, el cual lleva por nombre title, el cual al agregarle un valor, especifica el significado de la abreviatura, es decir la versión no abreviada del texto.

<abbr title="abbreviation">abbr</abbr>

En la versión anterior de HTML, contábamos con la etiqueta acronym, la cual tenía una función similar, pero su aplicación semánticamente correcta, era para aquellos casos en donde el texto muestra únicamente las letras iniciales de una seria de palabras.

<acronym title="Organización de las Naciones Unidas">ONU</acronym>

Para HTML5 acronym ha quedado atrás y su funcionalidad fue absorbida por abbr.

time

La forma en que representamos el tiempo es casi universal, sin embargo existen partes del mundo donde se manejan distintos tipos de formato para dicha representación. Por ejemplo, en México si tu quieres abreviar la presentación de la fecha 29 de noviembre de 2013 generalmente lo haces así 29/11/2013, pero en Estados Unidos esta misma fecha sería desplegada así 11/29/2013, en Rusia 29.11.2013, y en algunas partes de Asia sería 2013-11-29. Con todas estas posibilidades, es difícil para una máquina leer correctamente las fechas de todos estos lugares.

La etiqueta time permite representar el tiempo y fechas en un formato legible para una máquina. El ejemplo anterior se podría escribir de esta manera con la etiqueta time:

<time datetime="2013-11-29"> 29/11/2013 </time>

Un analizador de HTML puede usar esto para determinar el tiempo exacto que queríamos decir, independientemente de cómo se le da formato. La etiqueta time también permite el uso de un formato de 24 horas, el cual se puede añadir a la fecha:

<time datetime="2013-11-29 18:00"> 29/11/2013 a las 18:00 </time>

mark

Anteriormente, era muy común utilizar etiquetas genéricas para desplegar un tipo de estilo específico sobre un texto, uno de estos casos era el resaltado de texto. Por ejemplo, agregar un elemento span con una clase específica para después agregarle un estilo adecuado, todo esto de la siguiente forma:

<p>
  Este es un texto normal <span class="highlight">el cual tenia una parte importante que querias resaltar</span> y después más texto…
</p>

Esto ahora ya no es necesario, ya que HTML5 introdujo el elemento mark, el cual representa un texto resaltado, es decir, el texto que está marcado con fines referenciales debido a su relevancia en otro contexto.

Publicado el 02/12/2013, última actualización 04/12/2013.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras