Htmleando...

🚀 20 cosas que quizás no sabías de HTML

✨ 1) Con `<link rel="preload">` puedes precargar un archivo para darle alta prioridad.

✨ 2) El atributo `loading="lazy"` permite posponer (lazy loading) la carga de un `<img>` para mejorar rendimiento. También se puede usar en `<iframe>`.

✨ 3) El atributo `srcdoc` permite indicar directamente código fuente para crearlo a demanda en un `<iframe>`.

✨ 4) Los enlaces `<a>` permiten usar un atributo `download` para indicar que el recurso se descargará en lugar de abrirse en una pestaña. Además, si le pones un nombre, se descarga con ese nombre.

✨ 5) ¿Sabías que puedes usar `<section>`, `<header>`, `<nav>` o `<footer>` en lugar de un `<div>`? ¡Sí, dev de React, te estoy hablando a ti!

✨ 6) Con la etiqueta `<datalist>` puedes crear una lista de datos similar a `<select>` pero abiertas y con autocompletado, sin necesidad de Javascript.

✨ 7) La etiqueta `<template>` nos permite crear etiquetas inertes (útiles para clonar) o código HTML encapsulado, donde el CSS interior no afecta al exterior, y viceversa. Sin Javascript.

✨ 8) Con `<link rel="alternate">` puedes indicar una versión alternativa de la página actual (PDF, video, etc...)

✨ 9) El atributo `poster` en una etiqueta `<video>` nos permite añadir una imagen a modo de "carátula" (thumbnail) en un video.

✨ 10) Puedes crear ventanas de diálogo con la etiqueta `<dialog>` e incluso cerrarlas sin Javascript.

✨ 11) El atributo `translate="no"` evita que se traduzca el texto de una etiqueta al usar Google Translate, por ejemplo.

✨ 12) Si te veo usar un `<center>` te corto el pito! 😋

✨ 13) Con `<meta name="theme-color">` puedes modificar el color/tema del browser en móviles.

✨ 14) El atributo `contenteditable` hace que toda tu etiqueta HTML, por ejemplo un `<p>`, sea editable por el usuario.

✨ 15) `<marquee>` está obsoleta pero aún funciona

✨ 16) La etiqueta `<base>` te permite añadir una "base" o prefijo a todas las URLs que uses en tu HTML.

✨ 17) Con `<meta property="og:image">` personalizas la imagen que sale como miniatura al poner el link en redes sociales (Open Graph).

✨ 18) Puedes acceder al valor de atributos `data-algo` desde JS accediendo a  elem.dataset.algo

✨ 19) En una etiqueta `<video>` puedes añadir el fragmento `#t=15` después del .mp4 para indicar el segundo donde quieres que empiece a reproducir.

✨ 20) La etiqueta `<track>` nos permite añadir subtítulos a nuestras etiquetas `<video>`. El formato usado es WebVTT (similar a .srt).

Fuente: Manz