HTML 5 tiene muchas caracteristicas y funciones nuevas que tal vez no conocias y te pueden ayudar a resolver algunos problemas o resolver algo de manera mas facil.
Las novedades de HTML 5 son muy variadas desde temas de javascript, manejo de archivos, XMLHttp Request, Notificaciones, Drag and drop y mucho mas.
En este articulo veremos 11 + 1 características de HTML 5 para que lo empieces a utilizar, si no las usas aun deja tu like y si ya las usas también.
1. Etiquetas
HTML 5 introduce nuevas etiquetas para mejorar el enmarcado, anteriormente todo se hacia con la etiqueta <div></div> y aunque aun muchos lo siguen haciendo lo correcto es utilizar las nuevas etiquetas.
- <header></header> Se utiliza para el contenido del encabezado o titulos de una pagina, no debe confundirse con <head></head>
- <article></article> Se usa para mostrar articulos o posts o contenido similar.
- <nav></nav> Se usa para las barras de navegación menus.
- <footer></footer> Se usa para el pie de pagina.
2. Audio y Video
En HTML 5 se introducen las etiquetas para incluir audio y video nativos, es decir ya no se necesita ninguna libreria externa para reproducirlos.
<!-- Uso de la etiqueta audio --> <audio controls> <source src="audios/mimusica.mp3" type="audio/mp3" /> Tu navegador no soporta el control de audio. </audio> <!-- Uso de la etiqueta video --> <video controls> <source src="videos/mivideo.mp4" type="video/mp4" /> Tu navegador no soporta el control de video. </video>
Resultado
3. Etiqueta de Barra de Progreso
La etiqueta de barra de Progreso nos dibuja una barra con el progreso, si el progreso esta en 0% se muestra la barra vacia y si esta en 100% se muestra la barra completamente llena, y asi los otros porcentajes.
<progress id="progreso" value="40" max="100"> 40% </progress>
Resultado
4. Placeholder para Elementos Input text o textarea
El placeholder en elementos input text sirve para mostrar un texto descriptivo del input text o textarea.
<!-- Input text --> <input type="text" name="texto" placeholder="Ejemplo de Placeholder"> <!-- Textarea --> <textarea name="texto" placeholder="Otro Placeholder"></textarea>
5. Nuevo elemento input email
El elemento input email de html 5 sirve para introducir correos electronicos validos.
Es decir valida que el valor que se introduzca sea un correo electronico.
<!-- Input range --> <input type="email" name="email" placeholder="Tu Email">
6. Nuevo Elemento input number
El elemento number sirve para que en los formularios puedas introducir solo numeros.
Se crea un elemento similar a uno tipo texto, pero dentro de este elemento no se pueden incluir letras o caracteres, solo numeros.
Tambien se habilitan 2 fechitas para subir y bajar el valor del elemento, ademas se puede definir un valor minimo, maximo y valor de salto.
<!-- Input number --> <input type="number" name="kilometer" placeholder="Kilometraje" min="-5" max="100000" step="5">
7. Nuevo elemento input date & input time
Los nuevos elementos para fecha y hora sirven para mostrar componentes que se puedan manejar.
Para el elemento date se muestra un calendario donde se puede seleccionar una fecha y esta fecha quedara registrada en el componente.
<!-- Input fecha --> <input type="date" name="fecha"> <!-- Input hora --> <input type="time" name="hora">
Para el elemento time se muestra un reloj o selector de hora, minuto, am y pm.
8. Atributo Required para elementos del formulario
A todos los elementos del formulario se puede agregar el atributo required para que estos sean obligatorios y se muestre un texto de alerta cuando se intente hacer submit al formulario sin llenar los campos obligatorios.
<input type="text" name="texto" placeholder="Ejemplo de Placeholder" required>
9. Atributo Autofocus
El atributo autofocus sirve para los elementos de formularios, para que estos elementos esten auto enfocados cuando se carga la pagina.
Un ejemplo claro de el atributo autofocus es cuando entramos a google.com automáticamente se enfocara o seleccionara la barra de texto para escribir nuestra busqueda.
<input type="text" name="texto" autofocus>
10. Atributo Readonly
El atributo readonly es para elementos de formularios, input text, textarea, number, etc.
El atributo readonly sirve para hacer elementos de solo lectura.
<!-- Elemento readonly --> <input type="text" name="texto" readonly>
11. Nuevo elemento rango
El elemento rango nos habilita un control para seleccionar un rango numerico, usando el mouse para deslizar y marcar el fin del rango. Se asigna un valor inicial, un valor final y un valor de paso o salto.
<!-- Input range --> <input type="range" name="rango" value="100" min="0" max="1000" step="1">
12. Etiqueta Mark
La etiqueta mark sirve para resaltar texto o marcar texto como si lo hicieramos con nun marcador o marca texto.
<p> Esta etiqueta sirve para marcar contenido <mark>"Importante"</mark>.. </p>