HTML representa uno de los pilares fundamentales en el desarrollo web. Sin embargo, hoy en día, el avance de la tecnología, en pro de separar el proceso en "capas" por llamarlo de alguna manera, ha permitido la aparición de las hojas de estilos (CSS) y Javascript (JS), permitiendo de cierta manera que HTML pierda parte de su potencial.

Sin embargo, HTML ha continuado su evolución y pues en este post quiero mostrarte una lista de sus atributos que probablemente no conoces, pero que pueden ser super útiles.

Si consideras que me he olvidado de algún otro atributo o característica importante, déjame saber en los comentarios y lo incluiré en el post. 😉

1.- Atributo: multiple

El atributo "multiple" nos permite indicarle a un campo input que puede aceptar múltiples valores por lo que el usuario podrá ingresar múltiples valores por ejemplo en un .

Es un atributo "boolean" válido para tipos de entrada de correo electrónico (email) o archivo (file) y el elemento .

Para el caso de un input de tipo "email", si y solo si, se especifica el atributo "multiple", el valor puede ser una lista de direcciones de correo electrónico separadas por comas. Cualquier espacio en blanco será removido de cada email en la lista.

Para la entrada de un archivo, el usuario puede seleccionar varios archivos en la forma habitual (manteniendo presionada la tecla Mayús o Crtl).

<input type="file" multiple>

2.- Atributo: accept

El elemento tiene el atributo "accept" el cual te permite indicarle al usuario los tipos de archivos permitidos que se pueden cargar.

Solo debemos pasarle una cadena de texto que contenga la lista separada por comas, los formatos de archivos permitidos.

También puede usarlo para especificar solo formato de audio, imagen o video.

<input type = "file" accept = ". png, .jpg">

3.- Atributo: contenteditable

"contenteditable" es un atributo global (aplicable a todos los elementos HTML) que hace que el contenido HTML sea o no, editable por el usuario. Sin embargo, hay que tener extremo cuidad con los cambios aplicados solo en el contenido visible frente al contenido del DOM.

<div contenteditable = "true"> Soy un div editable, 😉 </div>
div editable

4.- Atributo: spellcheck

"spellcheck" es otro atributo global que puede utilizar para revisar la ortografía y la gramática en elementos HTML tales como inputs y otros elementos editables.

Nota: Por lo general, los elementos que no son editables, no se comprueban en busqueda de errores ortográficos, aún cuando el atributo "spellcheck" esté establecido a "true" y el navegador del usuario soporta la verificación de ortografía.

<p contenteditable = "true" spellcheck = "true">
Gracias por comprobar mi ortografía :)
</p>

5.- Atributo: translate

"translate" le indica al navegador si el contenido debe o no traducirse.

Por ejemplo, podemos usarlo para evitar que Google Translate intente traducir automáticamente el nombre de su empresa o marca.

<footer> <p translate = "no"> Apple Company, Inc. </p> </footer>

6.- Atributo: poster

El atributo "poster" sirve exclusivamente para controles de video y nos permite asignar una imagen para que sea mostrada mientras se descarga el video o hasta que el usuario presione el botón de reproducción.

Si no se especifica una imagen, entonces no se mostrará nada hasta que el primer fotograma esté disponible, es entonces cuando se utiliza este primer fotograma como poster.

<video controls
src = "https://stockvideos.org/video-available/8046.mp4"
poster = "https://stockvideos.org/thumbnails/108046-rainbow-lorikeet-parrots-occupying-table-at.jpg">
</video>

7.- Atributo: download

El atributo "download" combinado con un elemento nos permite indicarle al navegador para que descargue una URL en lugar de "navegar" hasta ella, de modo que se solicite al usuario el destino donde desea guardar el recurso solicitado en su equipo local.

Nota: También puede especificar el nombre del archivo.

<a href="download.php?file=xyz.rar" download="website">Download Website 📦</a>

8.- Tag: details

El tag "details" proporciona detalles on-demand al usuario. Si necesitas mostrar contenido opcional y que sea a petición del usuario, esta etiqueta es tu mejor opción.

De forma predeterminada, el "widget" está cerrado. Cuando está abierto, se expande y muestra el contenido que contiene.

La etiqueta "summary" se usa con "details" para especificar un encabezado visible.

<details>
     <summary>Click aquí para ver detalles</summary>
         <table>
                <tr>
                    <th>#</th>
                    <th>Producto</th>
                    <th>Descripción</th>
                    <th>Precio</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>Zapatillas Nike</td>
                    <td>Zapatillas Nike running para entrenamiento</td>
                    <td>€ 119.95</td>
                </tr>
          </table>
  </details>

9.- Tag: output

La etiqueta representa el resultado de un cálculo. Normalmente, este elemento define una región que se utilizará para mostrar la salida de texto de algún cálculo.

<form oninput="total.value=parseInt(price.value) * parseInt(quantity.value)">
   <input type="integer" id="price" value="0">
          * <input type="number" id="quantity" value="0">
                = <output name="total" for="price quantity"></output>
</form>

10.- Tag: datalist

La etiqueta "datalist" nos permite especificar una lista de opciones predefinidas y ademas permitir a los usuarios agregar más. Proporciona una función de auto completar que le permite obtener las opciones deseadas con una escritura anticipada.

<form action="" method="get">
    <label for="product">Elige tus productos de la lista:</label>
    <input list="products" name="product" id="product">
        <datalist id="products">
           <option value="Ordenador">
           <option value="Cascos">
           <option value="Teclado">
           <option value="Ratón">
           <option value="Monitor">
        </datalist>
     <input type="submit">
 </form>

Consejos:

¿En qué se diferencia de la etiqueta "select" - "option" tradicional? Seleccione la etiqueta para seleccionar uno o más elementos de las opciones que necesita para ir a través de la lista para elegir. datalist es una función avanzada con soporte para auto completar.

11.- Tipo: Range (Slider)

El rango es un tipo de entrada que nos permite seleccionar valores utilizando un "slider". Este tipo de entrada (input) es muy útil en muchos casos como por ejemplo para seleccionar rangos de precios, filtros de distancia, entre otros.

<form method="post">
    <input 
         type="range" 
         name="kilometers" 
         min="5" 
         max="50" 
         step="5" 
         value=""
         onchange="changeValue(event)"/>
 </form>
 <div class="range">
      <output id="output" name="result">  </output>
 </div>

function changeValue(event) {
            let value = event.target.value;
            let output = document.getElementById('output');
            output.value = value;
}

12.- Tag: meter

El tag "meter" nos sirve para medir datos dentro de un rango. Nos permite mostrar como una especie de barra de progreso en base a los valores establecidos:

<label for="shipping">Tracking del producto</label>
<meter id="shipping" value="0.6">Enviado!</meter><br>

Si te gustó el post, o te pareció interesante, piensa en que quizás le pueda servir a alguien más, sobre todo si se esta iniciando en el mundo del desarrollo web. Es por esto que sería de muchísima ayuda, tanto para esas personas, como para mi, que compartas este post. Te lo agradecería muchísimo 🤩