10 utilidades de HTML5 que no sabías

Facebook
Twitter
LinkedIn
WhatsApp

Te voy a mostrar las 10 utilidades de HTML5 que antes las utilizabas con JavaScript y ahora se ha estandarizado en HTML5. He seleccionado para mí, las que veo que son más útiles:

Subrayado

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 de la etiqueta <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.

<h1>Este texto está <mark style="background-color:yellow;">subrayado</mark></h1>

Este sería el resultado:

subrayado html

Edición de tu página visualmente

El navegador te permitirá editar elementos de tu página web ya mostrados en pantalla mediante el atributo contenteditable. Para ello, tenemos que poner este atributo en las etiquetas HTML que queremos editar. Por ejemplo:

<h1 contenteditable="true">Este texto es editable</h1>

El resultado es:

editar html visualmente

Corrector ortográfico

El navegador te permitirá corregir posibles faltas de ortografía de tu página web, utilizando el atributo spellcheck. Para ello, ternemos que poner el atributo en las etiquetas HTML que queremos editar, igual que en la utilidad de arriba. Por ejemplo:

Este atributo es una de las utilidades de HTML5 más importantes, ya que trata de evitar que tengas faltas de ortografía.

<input type="text" value="Heste testo hesta mal hescrito" width="200px"/>
<input type="text" value="Este texto est&aacute; mal escrito" width="200px"/>

Os dejo un ejemplo con dos comparaciones. Mal escrito y bien escrito:

10 utilidades de HTML5 que no sabías 3

Información complementaria

Esta etiqueta <details> permite ofrecer y mostrar información complementaria y/o adicional de un elemento de la web.

Su comportamiento es como la de un widget que muestra y oculta información (Como un menú con efecto acordeón). Un ejemplo sería las especificaciones técnicas de un producto en el típico carrito de la compra.

<details>
  <summary>Click para ver más información</summary>
  <p>Aquí tienes más información desde lacodigoteca.com</p>
</details>

Ejemplo:

mostrar ocultar html5

Mapeo de imágenes

La etiqueta <map> se utiliza para crear mapas de imágenes, que sirve 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. También puedes utilizar un generador de mapas como image-map.net

El ejemplo que os voy a mostrar a continuación, permite clickar en los periféricos de mi ordenador: Pantalla, teclado, ratón y torre. En la captura os demuestro que al pasar por el teclado sale el texto alternativo «Teclado».

<img src="escritorio.jpg" usemap="#escritorio">
<map name="escritorio">
    <area target="" alt="Counter Strike" title="Monitor" href="#" coords="204,8,239,274,638,267,676,0,671,6" shape="poly">
    <area target="" alt="Teclado" title="Teclado" href="" coords="306,332,627,333,665,407,655,418,295,414,284,400,306,331" shape="poly">
    <area target="" alt="Ratón" title="Ratón" href="" coords="703,345,708,362,701,372,704,382,724,388,738,401,750,406,763,402,773,389,771,375,765,360,754,351,739,343,720,338,710,338" shape="poly">
    <area target="" alt="Torre" title="Torre" href="" coords="230,220,133,219,1,307,1,418,64,586,182,597,215,531,210,519,163,515,158,490,255,330" shape="poly">
</map>
10 utilidades de HTML5 que no sabías 6

Si quieres hacerlo responsive, te recomiendo que utilizar la siguiente librería: ImageMap Resizer

Plantillas de código

Esta es una de las utilidades de HTML5 que más me gusta. Junto con HTML5 vino la nueva etiqueta <template>. La etiqueta <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.

<html>
<head>
<style>
body,
input[type="button"] {
  font-family: bookman old style;
  font-size: 12pt;
}

table {
  border-collapse: collapse;
  margin: auto;
}

th,
input[type="button"],
h2 {
  color: indianred;
}

th,
td {
  border: 1px solid indianred;
  padding: 6px;
}

input[type="text"] {
  border: 1px dashed indianred;
}

input[type="button"] {
  border: 2px solid indianred;
  background: antiquewhite;
  cursor: pointer;
}

input[type="button"]:hover {
  background: indianred;
  color: antiquewhite;
}
</style>
</head>
<body>
<div style="text-align:center;">
  <h2>A Table</h2>
  <h5>Click "New Row" to add a row to table</h5>
  <table id="myTable">
    <tr>
      <th>Sl. No.</th>
      <th>Input</th>
    </tr>
    <tr>
      <td>1.</td>
      <td>
        <input type="text" />
      </td>
    </tr>
  </table>
  <br>
  <input type="button" value="New Row" onclick="addRow()">
  <template id="rowTemplate">
    <tr>
      <td></td>
      <td>
        <input type="text" />
      </td>
    </tr>
  </template>
</div>
<script>
function addRow() {

  var template = document.querySelector('#rowTemplate'),
    tbl = document.querySelector('#myTable'),
    td_slNo = template.content.querySelectorAll("td")[0],
    tr_count = tbl.rows.length;

  td_slNo.textContent = tr_count;
  var clone = document.importNode(template.content, true);
  tbl.appendChild(clone);

}
</script>
</body>
</html>

Al pulsar al botón «New Row», recogerá el HTML que tiene entre las etiquetas de <template>. Hay que utilizar HTML y JavaScript. Os dejo con el resultado:

10 utilidades de HTML5 que no sabías 8

URL de origen

El etiqueta <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.

<html>
	<head>
		<base href="http://www.latierra.com">
	</head>
	<body>
		<h1>Continentes</h1>
		<ul>
			<li><a href="africa">África</a></li>
			<li><a href="america">América</a></li>
			<li><a href="asia">Asia</a></li>
			<li><a href="europa">Europa</a></li>
			<li><a href="oceania">Oceanía</a></li>
		</ul>
	</body>
</html>

Resultado:

10 utilidades de HTML5 que no sabías 10

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.

Opciones agrupadas de un listado

La etiqueta  <optgroup> representa un grupo de opciones (option) temáticamente definido, que forma parte de un select. Las opciones agrupadas pueden ser etiquetadas mediante el atributo label, que usarán los navegadores para mostrar como nombre del grupo. Estas utilidades de HTML5 permite que visualmente esté mejor ordenado.

<html>
	<head>
		<meta charset="UTF-8"/>
		<base href="http://www.latierra.com">
	</head>
	<body>
		<h1>Elige un país</h1>
		<select>
			<optgroup label="África">
				<option>Marruecos</option>
				<option>Nigeria</option>
				<option>Costa de Marfil</option>
				<option>Sudáfrica</option>
			</optgroup>
			<optgroup label="América">
				<option>México</option>
				<option>Colombia</option>
				<option>Venezuela</option>
				<option>Honduras</option>
			</optgroup>	
			<optgroup label="Asia">
				<option>China</option>
				<option>Japón</option>
				<option>India</option>
				<option>Filipinas</option>
			</optgroup>
			<optgroup label="Europa">
				<option>España</option>
				<option>Francia</option>
				<option>Italia</option>
				<option>Portugal</option>
			</optgroup>				
			<optgroup label="Oceanía">
				<option>Australia</option>			
				<option>Nueva Zelanda</option>
				<option>Islas Salomón</option>
			</optgroup>
		</select>
	</body>
</html>

Y el resultado es:

10 utilidades de HTML5 que no sabías 12

Métricas

El elemento <meter> y <progress> representa una medida dentro de un rango conocido. Estas utilidades de HTML5, pueden ser útil para representar medidas en diferentes situaciones, como uso de disco, memoria o ancho de banda, los resultados de un encuesta, la cantidad recaudada en una colecta, el número de registros coincidentes en una consulta, etc.

<html>
	<head>
		<meta charset="UTF-8"/>
	</head>
	<body>
		<label for="rendimiento">Ejecutando rendimiento:</label>
		<progress id="rendimiento" max="100" value="70"> 70% </progress><hr />	
		<label for="cpu">CPU:</label>
		<meter id="cpu" min="0" max="5" low="1" high="4" optimum="1" value="2">GhZ</meter><br />			
		<label for="ram">Memoria RAM:</label>
		<meter id="ram" min="0" max="16" low="8" high="12" optimum="1" value="13">GB</meter><br />	
		<label for="cpu">Espacio en unidad C:</label>
		<meter id="cpu" min="0" max="500" low="200" high="485" optimum="80" value="250">GB</meter><br />				
	</body>
</html>

Os dejo el resultado:

10 utilidades de HTML5 que no sabías 14

Etiqueta de comilla doble

El elemento <q> indica que el texto adjunto es una cita corta en línea. La mayoría de los navegadores modernos implementan esto rodeando el texto entre comillas. Este elemento está destinado a citas breves que no requieren saltos de párrafo; para citas de bloque independiente, utiliza el elemento <blockquote>. Es una de las utilidades de HTML5 más útiles que puede utilizar un programador, ya que las comillas a veces resultan un poco complicadas.

<h3>Maradona: <q>Pase lo que pase y dirija quien dirija, la camiseta número 10 será siempre mía</q>.</h3>
10 utilidades de HTML5 que no sabías 16

Si quieres más información de otras etiquetas, te dejo un enlace con más utilidades de HTML5 😉

Facebook
Twitter
LinkedIn

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio