Lo nuevo que ha ofrecido HTML5 ha sido un aporte bastante significativo para llegar a la web semantica. Ayudando a estructurar el documento en el navegador, definiendo algunas secciones predefinidas para que la maquina entienda mas facilmente estas secciones. Aunque HTML5 nos brinde una serie de etiquetas con funcionalidades bastantes interesantes, segurmante no conoceras algunas otras que de igual manera te seran de gran ayuda.

Si visitas W3.org donde reside la documentación, encontrarás cientos de páginas documentando cada elemento ampliamente. Seguramente encontraras un par de elementos HTML que hayas pasado por alto, en este articulo compartire 5 Elementos HTML5 Que Probablemente No Conoces 😉

1. Elemento Para Ejemplos

El elemento sample ó samp muestra el texto como si se tratara de un sistema informático, un programa ó un script. Fue introducido desde HTML3!. Este elemento será útil para los tutoriales o manuales de Contenido de Tecnología Full. Este ejemplo muestra cómo envolver un error que se produjo en la Terminal.

 If you type dir in Terminal, it will output command not found: dir. 

Todos los navegadores, incluyendo IE5, soportan esta etiqueta, y van a mostrarlo con tipografía de ancho fijo como si estuviera dentro de un plugin de código.

2. Elemento Keyboard Input

Elemento de Keyboard Input ó kbd es un elemento que define una entrada del usuario. Al igual que el elemento samp , kbd se utilizaría para fines tecnologicos ó artículos relacionados con la informática.

Esta etiqueta es bastante util para cuando necesitemos instruir las operaciones que son necesarias, para esto la usaremos de la siguiente manera:

To confirm deletion of your account, type DELETE.

kbd también se puede utilizar para representar las teclas reales de teclado:

Press Enter to create a new line.  

Pero cuando si utilizamos este elemento junto con el elemento samp , podría representar el input que se realizó a través de la pantalla de la aplicación, tales como los botones o menús. He aquí un ejemplo:

Click Agree to proceed.  

A pesar de que el elemento kbd se describe explícitamente como «Entradsa de teclado» , también podemos usarlo para otro tipo de entrada, tales como las entradas de voz. Si realizas tutoriales o manuales sobre Siri, Google Voice, o Cortana, los cuales nos permiten comunicarnos con el dispositivo mediante comandos de voz, para esto podremos usarlo de la siguiente manera:

    ...the Ok Google hotword isn't actually disabled according to region   
    and can be easily enabled in just two steps.  

Aplicando Estilos

Todo esto es util para cuando necesitamos mostrar informacion tecnica, pero muchas veces esto es algo plano. Y si le aplicamos algo de estilo? Listo, mostremos algo mas elegante. Podemos añadir una clase, por ejemplo, button-input para representar una tecla del teclado o un botón de alguna Aplicación.

Luego, en el CSS, agregamos el siguiente codigo:

    .button-input {  
        border: 1px solid #333;  
        background: linear-gradient(#aaa 0%, #555 100%); /* W3C */  
        color: #fff;  
        padding: 3px 8px;  
        border-radius: 3px;  
        box-shadow: 0px 2px 0px 0px #111;  
    }  

Luego veremos algo mas elegante y real:

3. Elemento Para Variables

El elemento variable o var, como su nombre lo indica, representa un carácter de variable. Este elemento puede ser útil para escribir tutoriales o artículos que forman parte de ecuaciones matemáticas, tales como:

var y = Math.sqrt(16);  

En el ejemplo anterior, envolvemos la ecuación con elemento de código, ya que la ecuación es un código JavaScript. Sólo nos envolvemos el personaje que es una variable con el elemento var.

4. Elemento Defining

Elemento defining o dfn se utiliza para resaltar un vocabulario o un término específico que se utiliza sobre todo en una comunidad o en una industria. Sector de Desarrollo Web, por ejemplo, está lleno de palabras que no son conocidas por todo el mundo.

Y a continuación se muestra un ejemplo donde utilizamos el elemento dfn para envolver la palabra Breadcrumb; tomamos la siguiente frase de Wikipedia.

    Breadcrumbs or breadcrumb trail is a navigation aid   
    used in user interfaces. It allows users to keep track of their locations within programs or documents.   
    The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.  

Los navegadores muestran en cursiva, que corresponde a la convención tipográfica para denotar una nueva instancia o un término extranjero.

5. Elemento Para Marcar

Mark es un nuevo elemento introducido como parte de HTML5. En resumen, se utiliza para resaltar el texto que desee. Por lo tanto, de manera predeterminada, los navegadores hacen este elemento con el color fluorescente brillante como se puede ver a continuación.

Para más información, puede dirigirse a su documentación, donde se pueden ver algunos ejemplos detallados de su uso.

Conoces alguna otra etiqueta desconocida y que sea bastante util? Compartela en un comentario 😉

Si te ha gustado el post, compártelo, regala un like ó comenta 😉