El HTML es la piedra angular del desarrollo web. Sin embargo, muchos programadores principiantes lo estudian muy superficialmente, queriendo pasar a CSS, JS, etc. lo antes posible. Como resultado, no aprovechan todo el potencial de HTML.
En este artículo encontrarás una lista de atributos que muchos recién llegados no conocen, pero que deberían.
Multiple
El atributo multiple permite al usuario introducir múltiples valores para <input> . Este atributo es apropiado para <input> con tipo file o email, así como para el elemento <select>. Si se especifica el atributo multiple para con type="email", el valor puede ser una lista de direcciones de correo electrónico separada por comas. Los espacios se eliminan de la lista.
En <input> con type="file" y el atributo añadido multiple el usuario puede seleccionar múltiples archivos (manteniendo pulsado Shift o Crtl).
<input type="file" multiple>
Accept
El elemento <input> también tiene un atributo accept. Esto le permite especificar los tipos de archivos que el usuario puede cargar.
Esto se hace asignando un valor al atributo accept como una cadena con las extensiones listadas (separadas por comas).
Este atributo también puede utilizarse para limitar la entrada a los archivos de audio, imagen o vídeo. Para ello, especifica audio/*, imagen/* o vídeo/* como valor del atributo accept.
<input type="file" accept=".png, .jpg">
3. Contenteditable
Contenteditable es un atributo global común a todos los elementos HTML. Se puede utilizar para que el contenido sea editable por el usuario. Pero, hay que tener cuidado y sólo se debe hacer editable el contenido visible.
<div contenteditable="true">Soy un div editable genial ;)</div>
Nota
También puedes usar document.designMode = "on" para hacer que todo el contenido sea editable, lo que realmente ayuda mientras creas el prototipo de tu página HTML.
<!DOCTYPE html>
<html>
<body>
...
<script>
document.designMode = "on";
</script>
...
</body>
</html>Spellcheck
Otro atributo global de nuestra lista es el corrector ortográfico –spellcheck. Se utiliza para comprobar la gramática de los elementos HTML, por ejemplo, los campos de entrada.
Nota
Normalmente, los elementos no editables no se comprueban en busca de errores, incluso si el navegador admite la spellcheck y ésta se establece como verdadera (true).
<p contenteditable="true" spellcheck="true">
Gracias por revisar mi ortografía :)</p>
Translate
El atributo translate indica al navegador si debe o no traducir el contenido.
Por ejemplo, puedes utilizar este atributo para evitar que Google Translate intente traducir automáticamente el nombre de tu marca o empresa.
<p>Este es un párrafo :)</p>
<footer><p translate="no">HTML Desde Cero</p></footer>
Poster
Con el atributo poster se puede especificar qué imagen debe mostrarse mientras se carga el vídeo o hasta que el usuario haga clic en el botón “Reproducir“.
Si no se define ninguna imagen, no se mostrará nada hasta que esté disponible el primer fotograma del vídeo y entonces ese primer fotograma se convertirá en el poster.
<video controls
src="https://bit.ly/3nWh78w"
poster="posterImage.png">
</video>Download
Utilizando el atributo download con el elemento <a>, es posible indicar a los navegadores que descarguen la URL en lugar de navegar hasta ella. Esto pedirá al usuario que guarde el documento vinculado como un archivo local.
También puedes especificar un nombre de archivo.
<a href="/images/imagen1.jpg" download="NombreArchivo">
Descárgame :)
</a>Nota
El atributo download no es compatible con IE o Edge (versión anterior a la 18), ni con Safari (versión anterior a la 10.1).
Créditos a Mariana Simon
