Clicky

Otras 10 etiquetas HTML que puedes no estar usando

HTML 5

La forma en que ha evolucionado el lenguaje HTML a veces puede sorprender

En un artículo anterior señalaba 8 elementos HTML que no estás usando (y deberías hacerlo), y los desarrolladores de front-end, que sin duda utilizan HTML constantemente, probablemente sentirán que no tienen más incógnitas. Sin embargo, la forma en que ha evolucionado (en particular, con el advenimiento de HTML 5) a veces puede sorprender. En este artículo, te voy a mostrar 10 etiquetas HTML que puedes no estar utilizando o incluso todavía no eres consciente de lo que te pueden ayudar para aumentar la semántica y la capacidad de mantenimiento de tus páginas web.

1. <meter>

En algún momento es posible que necesitemos para expresar una medida en una página web. Podría ser cualquier cosa, desde el resultado de un examen hasta el uso del disco. HTML 5 introduce un nuevo elemento llamado <meter> que representa una medida escalar dentro de un rango conocido, o un valor fraccionario.

Sobre la base de la definición de este elemento en la especificación, <meter> no es bueno para medir algo así como la temperatura exterior - porque no tiene un rango fijo (se puede definir, pero es arbitrario). Este elemento tiene varios atributos. Los más comunes son: value, min y max. El primero se utiliza para indicar la medida, mientras que los otros dos se utilizan para especificar el rango. Por lo tanto, si deseas indicar que un disco duro de 500Gb ha ocupado 300Gb, se puede escribir:

ocupados <meter value="300" min="0" max="500">300Gb de 500Gb</meter>

2. <progress>

Desde tiempos inmemoriales los desarrolladores han creado widgets para notificar a los usuarios sobre el progreso de una descarga o una tarea. Hoy en día hay para esto una etiqueta HTML5 nativa llamada <progress> . Tiene dos atributos: value (para especificar el estado del progreso) y max (para indicar el valor máximo a que llegará). Si no está establecido el valor max, se asume un rango de 0 a 1 y el value puede ser cualquiera flotando dentro de este rango. Por lo tanto, para mostrar una barra de progreso de una tarea que se completa al 50% se puede escribir:

<progress value="50" max="100">50%</progress>

O su equivalente:

<progress value="0.5">50%</progress>

El texto dentro del elemento se utiliza como un mensaje para los navegadores más antiguos. Generalmente, este elemento no se utilizaría de forma estática, sino que más bien se utiliza en conjunción con JavaScript o animaciones CSS para indicar el progreso continuo.

3. Y 4. <cite> y <q>

Al escribir, nos encontramos a menudo citando un libro, un artículo, o una persona. Sobre el papel se suelen utilizar comillas dobles ("...") para delimitar la parte acotada, junto con las preposiciones de o por para especificar quién estamos citando o qué fuente.

En HTML5 existe <q> para especificar lo acotado, y <cite> para la fuente. Ten en cuenta que hasta hace poco <cite> sólo podía utilizarse para indicar el título de una obra (libro, artículo, película, etc.), no una persona. Sin embargo, esto se ha actualizado para que podamos utilizarlo para "citar" también a la gente. La etiqueta <q> tiene un atributo llamado cite que nos permite indicar el enlace a la fuente de la cita.

Ahora, por ejemplo, digamos que queremos citar una famosa cita de Ezra Pound (unas de mis frases favorita). Usando HTML, escribiríamos:

Debemos luchar por nuestros derechos porque, como dijo <cite>Ezra Pound</cite>: <q>Si un hombre no está dispuesto a asumir algo de riesgo por sus opiniones, puede ser que las opiniones no sean buenas o que el hombre no sea bueno.</ q>

5. <pre>

El elemento <pre> nos permite mostrar el texto preformateado como aparece en la fuente. Esto significa que los múltiples espacios en blanco no se perderán (cambiando la forma por defecto en que los navegadores manejan los espacios en blanco). Esta etiqueta es ideal cuando se necesita mostrar un fragmento de código, ya que ayuda a preservar la sangría. Por ejemplo, una página puede tener algo como esto:

<pre>
function sayHello(name) {
    for (var i = 0; i &lt; 3; i++) {
        console.log('Hi ' + name + '!');
    }
}
 
sayHello('Aurelio');
</pre>

En el caso de este artículo para toda la escritura del código HTML yo estoy utilizando:

<pre xml:lang="html">
...
código
....
</pre>

6. y 7. <kbd> y <samp>

Si eres un escritor de tecnología es posible que a menudo hables de las herramientas y técnicas que requieren el uso de comandos de terminal o shell. Por lo tanto, lo más probable es que también quieras mostrar el resultado de estos comandos. Esta situación es el ajuste perfecto para <kbd> y <samp> . El primero representa una entrada de usuario pero no limitada a la entrada del teclado. El último representa una muestra de la salida de un programa o un sistema de computación. Estos elementos funcionan bien con el elemento presentado previamente pre. Un ejemplo de la utilización de estos elementos, similar a un ejemplo utilizado en la especificación, es el siguiente:

<samp><span>jdoe@mowmow:~$<;/span> <kbd>ssh demo.example.com</kbd>
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com
<span class="prompt">jdoe@demo:~$<;/span> _</samp>

8. <small>

Antes de HTML5 el elemento <small> era sólo de presentación que se utilizaba para escribir palabras utilizando una fuente más pequeña. En HTML5 <small> tiene algún valor semántico. Ahora el elemento <small> representa el texto que a menudo se encuentran en letra pequeña, como renuncias, advertencias, restricciones legales o derechos de autor. Un ejemplo de su uso es el siguiente:

Este artículo está escrito por Jesús Cáceres <small> Copyright © 2014 </small>

9. <output>

La etiqueta <output> representa el resultado de un cálculo. Su principal atributo es for, que contiene una lista de IDs separadas por espacios de los elementos que entraron en el cálculo, o que influyeron en el cálculo de otra manera. Este elemento es exactamente lo que se necesita si tienes un sitio web que ofrece algo así como fijación de precios o cotizaciones de seguros de vida del automóvil.

Para verlo en acción, imagina que hay un widget en la página web de tu empresa, donde los usuarios pueden especificar la cantidad a invertir cada año en tu compañía a cambio de un porcentaje determinado. Sobre la base de esta situación, es posible que tengas un formulario, utilizando el elemento output como se muestra a continuación:

<form id="form-calculation">
    
<label for="amount">Amount:</label> <input id="amount" type="number"/>
<label for="percentage">Percentage:</label>
 <input id="percentage" type="number">
 
 <label for="years">Years:</label>
 <input id="years" type="number">
 
 <input type="submit" value="Submit">
 
 <label for="total">Total:</label>
 <output id="total"></output>
</form>
<script>
function calculateTotal(amount, percentage, years) {
   for(var i = 0; i < years; i++) {
      amount += amount * percentage / 100;
   }
 
   return amount;
}
document.getElementById('form-calculation').addEventListener('submit', function(event) {
      event.preventDefault();
 
      document.getElementById('total').textContent = calculateTotal(
         Number(document.getElementById('amount').value),
         Number(document.getElementById('percentage').value),
         Number(document.getElementById('years').value)
      );
   },
   false
);
</script>

10. <dfn> (La guinda del pastel)

Antes de hablar de este elemento, quiero confesar algo. Cuando me decidí a escribir este artículo, me puse a pensar que etiquetas debía de incluir. Cuando llegué a la 9ª etiqueta en mi lista, pensé que habría estado bien añadir algo especial a modo de conclusión. Así que, decidí explorar la lista de etiquetas HTML5.

El elemento dfn nos permite definir un término. En su forma más simple contiene el término que deseamos definir y, a continuación, envolver en un párrafo un grupo de lista de descripción, o una sección que contiene la definición. Para entender el concepto, vamos a decir que estamos escribiendo una página en la que estamos describiendo el HTML, y queremos definirlo. Para usar la etiqueta <dfn>, se puede escribir:

<dfn>HTML</dfn> es el principal lenguaje para el marcado de contenido web.

En este caso, hemos definido el término HTML, que es un acrónimo. Además podríamos mejorar nuestra marcado escribiendo esto:

<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> es el principal lenguaje para el marcado de contenido web.

Para elegir cuál es el término definido, la norma especifica es una lista de prioridades hecha de 3 puntos. La prioridad va a nada si no se especifica el atributo title de la etiqueta <dfn>. Entonces, tenemos que definirla con un elemento hijo de dfn: abbr (como se muestra en el segundo ejemplo). La prioridad última va en el texto del elemento dfn (como se muestra en el primer ejemplo).

En Conclusión

En este artículo hemos discutido una serie de etiquetas HTML que son poco utilizadas, y a menudo olvidadas. Sugiero leer de vez en cuando la lista completa de etiquetas HTML disponibles. De esta manera podrás refrescar tus conocimientos de los elementos semánticos, y tal vez te encontrarás con alguna sorpresa en el camino.

Artículo original de Aurelio De Rosa "10 HTML Tags You May Not Be Using"

Jesus_Caceres