Por el momento hay un total de 142 elementos HTML estandarizados por la W3C, excluyendo los que están en las fases iniciales de estandarización y los que se quedaron obsoletos. Dicho esto, es posible que te pierdas o que te olvides de algunos de ellos que pueden ser realmente útiles, cuando los necesites.
Anteriormente hicimos un resumen de algunos de los mejores trucos de CSS que seguramente habías pasado por alto. Este artículo te recordará algunas de esas etiquetas HTML que no sabías que podías utilizar para implementar características tales como:
Mapas de imágenes
El tag map se pueden utilizar para crear mapas de imágenes. Los mapas de imagen sirven, básicamente, para crear áreas clicables dentro de una imagen. Esas áreas clicables pueden ser hipervínculos hacia otra página web o anclas hacia otras partes del mismo documento. Puedes definir qué áreas de una imagen quieres que sean clicables con sólo indicar las correspondientes coordenadas XY de los puntos de los tag area, anidados dentro de map.
Nota: No se le puede dar estilo a las zonas clicables a través de CSS. Si quieres que esos marcadores tengan estilo, utiliza un sencillo software de edición de imágenes para dibujar los marcadores.
Consejo: Si quieres saber las coordenadas de un punto en una imagen, abre la imagen en un programa de edición de imágenes y mover el cursor hacia ese punto. Deberías ser capaz de ver las coordenadas del punto en el propio software. Por lo menos, en GIMP se muestra en el lado izquierdo de la barra inferior.
Input con sugerencias
Utilizar el tag datalist, proporciona una lista de sugerencias relevantes que aparecerán mientras tecleas algún valor dentro del campo input. Podéis ver una demostración en este codepen.
Resaltar texto
Los textos resaltados por lo general cuentan con un color del texto oscuro y un color de fondo claro. Puedes lograr este efecto de texto resaltado sin ayuda alguna y únicamente utilizando HTML. Cualquier texto que pongas dentro del tag mark adquirirá ese efecto.
Puedes personalizar el color del resaltado con la propiedad de CSS background-color del mark y la propiedad CSS color para ajustar el color del texto.
Definir plantillas
Junto con HTML5 vino el nuevo tag template. El tag template es un elemento que nos permitirá crear una especie de plantilla de código HTML que luego podremos utilizar tantas veces como queramos en nuestra página.
Por ejemplo, supón que tienes un table donde las filas se añaden de forma dinámica. Puedes simplemente añadir una fila vacía en la tabla dentro de la template y cuando sea necesario llamar a una función de JavaScript que contenga una secuencia de comandos para copiar el contenido al interior de los tags de dicha plantilla. Esto no está soportado por IE.
Letra pequeña
Nos referimos con letra pequeña al texto del documento que se muestra normalmente de tamaño muy pequeño, que contiene información como las condiciones, términos, restricciones, citas, derechos legales, etc. El tag small de HTML se puede utilizar para mostrar letras pequeñas. A partir de HTML5 en adelante, el tag small no sólo muestra un texto de letra pequeña, sino que también define semánticamente lo mismo que los avisos legales y demás advertencias.
Base URL
El tag de HTML base es realmente útil cuando cuentas en tu web con múltiples enlaces y casi todos están redirigidos al mismo dominio. Este tag te permite añadir una Base URL al documento, y a su vez te otorga la capacidad de añadir sólo URLs relativas a otros enlaces de la página cuando sea necesario.
Nota: Todas las direcciones URL relativas de la página harán referencia a la Base URL. Si tienes cualquier vínculo con un dominio diferente, no te olvides de asignar la dirección URL completa al mismo.
Imágenes responsive
El desarrollo web responsive está de moda debido a que los dispositivos móviles han cambiado nuestra forma de navegar por la red. En HTML, una imagen se puede mostrar en diferentes tamaños para que se adapte a la resolución de donde se está mostrando. El elemento picture de HTML5 permite añadir varios src de imagen para las diferentes resoluciones existentes. Así te asegurarás de que la imagen sea correcta dependiendo del dispositivo donde se visualice.
Nota: Esto actualmente sólo funciona en Chrome. Si quieres verlo en Firefox deberás configurar el dom.image.picture.enable a true en el about: config.
Color Picker
HTML5 introdujo muchos elementos nuevos para inputs; el color picker es uno de ellos. Este elemento permite a los usuarios escoger un color mediante un control que simula un cuadro cromático. El color escogido se mostrará en hexadecimal en la caja de texto.
Grupo de opciones
Si cuentas con muchas opciones en una lista desplegable y quieres mostrarlas agrupadas, el elemento optgroup es tu hombre. También permite darle estilo mediante CSS si quieres un mayor o menos indentado.
El elemento noscript
Lo que hay dentro del elemento noscript se mostrará en el navegador únicamente cuando Javascript sea desactivado. Este tag es muy útil para avisar a los usuarios de que, si quieren que una función específica funcione de manera correcta, deberían habilitar Javascript.
<head>
<noscript><link rel="stylesheet" href="noscript_fallback.css"></noscript>
</head>
<body>
<noscript><h2>Javascript is disabled in your browser.</h2></noscript>
</body>
Y este ha sido el artículo en el que trataba explicaros las diferencias entre Grid y StackPanel, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!