Clicky

8 elementos HTML que no estás usando (y deberías hacerlo)

elementos HTML 5

Usar estos elementos es una buena forma de empezar a escribir más limpio

En la web de hoy se utiliza mucho la palabra semántica. Pero ¿qué significa semántica? ¿Por qué es importante?

El HTML semántico expresa el significado del documento. Es menos acerca de cómo se ve el texto y más sobre lo que tiene. Buenas marcas semánticas ayudan tanto a las personas como a las máquinas a entender el contenido y su contexto.

El marcado semántico es mucho más accesible y más fácil para que sea interpretado por los lectores de pantalla. Es amigable con SEO. Funciona mejor con los navegadores modernos. Se reduce la cantidad de código necesario para expresar el contenido y aumenta la claridad del código si lo tienen que leer otras personas.

Está bien, así que el contenido semántico es bueno, pero ¿cómo se usa? Una de las mejores maneras de empezar a escribir con un mejor margen de beneficio es reemplazar las etiquetas genéricas con elementos más expresivos. Echemos un vistazo a las ocho que se puede utilizar para intensificar su utilidad.

<q>

Al igual que su prima cita en bloque, <blockquote>, la etiqueta <q> se utiliza para citar un texto.

¿Por qué no usar las comillas? Las comillas no siempre implican una cita. A veces se usan para dar énfasis, ironía, 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 estás citando a alguien, <q> muestra explícitamente su significado.

<i> y <b>

De vuelta en los viejos tiempos, <i> y <b> se utilizaron para identificar el texto en cursiva y negrita. Cuando la idea de separar el contenido semántico de la presentación comenzó a ganar fuerza, utilizar <i> y <b> se hizo mal visto porque representaban cómo se muestra el texto, en lugar de lo que significaban. Fueron reemplazadas por <em> y <strong>, que indican respectivamente enfatizar y texto fuertemente enfatizado.

Con HTML5, <i> y <b> tienen ahora brillantes nuevos significados semánticos. La etiqueta <i> se utiliza para el texto que se encuentra en un tono o distinto estado de ánimo. Esto es útil para cosas como pensamientos y términos técnicos. La etiqueta <b> identifica el texto que es estilísticamente diferente de texto normal, pero no tiene ningún significado semántico diferente. ¿Es esto diferente que usar <span>? La clave es que <b> comunica una falta de significado semántico.

<abbr>

<abbr> se utiliza para abreviaturas, está claro. Esto puede ser muy útil en documentos con varias abreviaturas cortas. <abbr> tiene un atributo de título opcional que contiene la versión no abreviada del texto.

<abbr title="laugh out loud">Bonito</abbr>
<abbr title="I don't know">idk</abbr>
<abbr title="got to go">h2o</abbr>
<abbr title="talk to you later">ttyl</abbr>

<time>

Echemos un vistazo a un problema de localización clásica: las fechas. En los Estados Unidos, 5 de octubre de 2013, es representada por 10/05/13. En el Reino Unido, es 05/10/13. En los Países Bajos, 5 de octubre se escribiría 10/05/13; en Sudáfrica sería 5/10/2013 y en Rusia es 10/05/13. Con todas estas posibilidades, es difícil para una máquina leer correctamente las fechas de todos estos lugares.

La etiqueta <time> nos permite representar la hora y la fecha en un formato legible por una máquina. El ejemplo anterior se podría escribir como <time datetime="2013-10-05">10/05/13</time>. Un analizador de HTML puede usar esto para determinar el tiempo exacto que queremos decir, independientemente de cómo se le da formato. La etiqueta <time> también permite opcionalmente un tiempo con formato de 24 horas que se añadirá a la fecha: <time datetime="2013-10-05 22:00">10/05/13 at 10 PM</time> .

<mark>

¿Alguna vez has hecho algo como esto?

<p>
  Trescientas páginas de aburrido, texto inútil. <span class="highlight">La única cosa que necesitas saber y nunca serás capaz de encontrarla de nuevo si no lo resaltas.</span> Una materia muy aburrida...
</p>

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

<input>

Sí, <input> . Probablemente hayas utilizado en algún momento <input type="text">, <input type="submit"> y tal vez incluso <input type="hidden">, pero ¿has recurrido a cualquiera de los otros tipos? Con HTML5, <input> ahora se puede utilizar con una amplia gama de tipos, incluyendo:

â—¦ email
â—¦ tel
â—¦ number
â—¦ range
â—¦ date
â—¦ time
â—¦ search
â—¦ color

Éstos son buenos, pero asegúrate de que cumplen con los requisitos de tu navegador antes de utilizarlos. Algunos tipos todavía no son compatibles con todos los principales navegadores.

<menu>

¿Alguna vez ha marcado un menú con una lista desordenada?

<ul class="menu-toolbar">
  <li class="new">Nuevo</li>
  <li class="open">Abrir</li>
  <li class="save">Salvar</li>
  <li class="quit">Salir</li>
</ul>

Bueno espera, menu está diseñado para este propósito. El elemento <menu> representa una lista desordenada de comandos. Tiene un atributo tipe que puede ser ajustado en popup o toolbar.

<menu type="toolbar">
  <li class="new">Nuevo</li>
  <li class="open">Abrir</li>
  <li class="save">Salvar</li>
  <li class="quit">Salir</li>
</menu>

Bonus

La mayoría de los desarrolladores de front-end han utilizado &nbsp; al escribir HTML, pero muchos no saben el verdadero significado del carácter. Un espacio de no separación no se rompe en una línea nueva. Esto significa que si tienes dos palabras separadas por un espacio de no separación, entonces ambas palabras se pegan al final de una frase. Esto es útil cuando separar las palabras podría ser perjudicial. Algunos buenos ejemplos son:

â—¦ Unidades: 12 m/s
â—¦ Hora: 20:00
â—¦ En los nombres propios: Pedro Pérez

Además, asegúrate de revisar el guión de no separación (&#8209;), que permite utilizar un carácter de guión que no se rompa.

Conclusión

HTML es cada vez más semántico. Usar estos elementos es una buena forma de empezar a escribir más limpio, con un marcado más accesible. Para una visión más completa de todas las opciones disponibles, mira a la Tabla Periódica de los Elementos, la documentación de Mozilla Developer Network o, si te sientes audaz, la especificación HTML del W3C. ¡Que te diviertas!

Ver el siguiente artículo de la serie HTML5: Otras 10 etiquetas HTML que puedes no estar usando

Jesus_Caceres