Buenas prácticas y atributos útiles en HTML
Precarga de archivos con <link rel="preload">
El elemento <link rel="preload"> permite cargar archivos con alta prioridad antes de que sean requeridos, mejorando el rendimiento de la página.
Carga diferida de imágenes e iframes con loading="lazy"
El atributo loading="lazy" permite diferir la carga de imágenes (<img>) e iframes (<iframe>) hasta que sean visibles en la pantalla, optimizando el rendimiento.
Creación de contenido dinámico con srcdoc en <iframe>
El atributo srcdoc permite definir directamente el código HTML dentro de un <iframe>, sin necesidad de un archivo externo.
Descarga de archivos con el atributo download en <a>
El atributo download en enlaces (<a>) permite que el recurso se descargue en lugar de abrirse en el navegador. Además, se puede especificar un nombre personalizado para el archivo.
Uso de etiquetas semánticas en lugar de <div>
En HTML existen etiquetas semánticas como <section>, <header>, <nav> y <footer>, que mejoran la estructura del documento en lugar de depender exclusivamente de <div>.
Autocompletado con <datalist>
La etiqueta <datalist> permite crear listas de opciones sugeridas dentro de un campo <input>, proporcionando funcionalidad similar a <select> pero con autocompletado nativo.
Uso de <template> para elementos inertes
La etiqueta <template> permite definir fragmentos de código HTML que no se renderizan inmediatamente en el DOM, útiles para reutilización y encapsulación sin afectar el estilo global.
Versión alternativa de contenido con <link rel="alternate">
El uso de <link rel="alternate"> permite especificar versiones alternativas de la página actual, como archivos PDF, feeds RSS o traducciones a otros idiomas.
Imagen de portada en <video> con poster
El atributo poster en la etiqueta <video> permite definir una imagen que se mostrará antes de que el video comience a reproducirse.
Creación de ventanas de diálogo con <dialog>
La etiqueta <dialog> permite crear cuadros de diálogo modales de forma nativa en HTML, con la opción de cerrarlos sin necesidad de JavaScript.
Evitar traducción automática con translate="no"
El atributo translate="no" impide que el contenido de una etiqueta sea traducido automáticamente en herramientas como Google Translate.
Evitar <center>, ya que está obsoleto
La etiqueta <center> ha sido declarada obsoleta y no se recomienda su uso. En su lugar, se pueden utilizar propiedades CSS como text-align: center; o flexbox.
Personalización del color del navegador con <meta name="theme-color">
El uso de <meta name="theme-color"> permite modificar el color de la interfaz del navegador en dispositivos móviles, mejorando la integración visual con la página web.
Contenido editable con contenteditable
El atributo contenteditable convierte cualquier elemento HTML en un campo editable directamente desde el navegador.
<marquee> está obsoleto pero sigue funcionando
La etiqueta <marquee> para crear texto en movimiento está en desuso y no se recomienda su implementación en nuevos proyectos.
Uso de <base> para definir una ruta base
La etiqueta <base> permite establecer una URL base para todos los enlaces y recursos relativos dentro de un documento HTML.
Personalización en redes sociales con Open Graph (<meta property="og:image">)
El uso de <meta property="og:image"> permite definir la imagen que se mostrará al compartir la página en redes sociales, mejorando la apariencia de la vista previa.
Acceso a atributos data-* en JavaScript
Los atributos personalizados data-* pueden ser accedidos en JavaScript a través de element.dataset.nombreAtributo.
Iniciar videos desde un punto específico
En la etiqueta <video>, se puede añadir el fragmento #t=15 al final de la URL para indicar que la reproducción debe comenzar en el segundo 15.
Subtítulos en <video> con <track>
La etiqueta <track> permite añadir subtítulos a un video en formato WebVTT, facilitando la accesibilidad y la comprensión del contenido multimedia.
Elementos semánticos / Estructural
| Etiqueta | Descripción |
|---|---|
| <article> | Define un artículo |
| <aside> | Define el contenido aparte del contenido de la página |
| <bdi> | Aísla una parte del texto que pueda ser formateada en una dirección distinta de otro texto fuera de ella |
| <command> | Define un botón de comando que un usuario puede invocar |
| <details> | Define los detalles adicionales que el usuario pueda ver u ocultar |
| <summary> | Define un título visible para un elemento <details> |
| <figure> | Especifica autónomo de contenido, como ilustraciones, diagramas, fotos, listas de códigos, etc |
| <figcaption> | Define un título para un elemento <figure> |
| <footer> | Define un pie de página de un documento o sección |
| <header> | Define un encabezado de un documento o sección |
| <hgroup> | Agrupa un conjunto de etiquetas desde los <h1> hasta los <h6> cuando un título tiene varios niveles |
| <mark> | Define el texto marcado / resaltado |
| <meter> | Define una medida escalar dentro de una gama. |
| <nav> | Define vínculos de exploración |
| <progress> | Representa el progreso de una tarea |
| <ruby> | Define una anotación de rubí (para el Este de la tipografía de Asia) |
| <rt> | Define una explicación / pronunciación de los caracteres (para el Este de la tipografía de Asia) |
| <rp> | Define lo que se muestra en los navegadores que no son compatibles con anotaciones de rubí |
| <section> | Define una sección de un documento |
| <time> | Define una fecha / hora |
| <wbr> | Define una posible ruptura del verso |
Nuevos para medios de comunicación / Media
| Etiqueta | Descripción |
|---|---|
| <audio> | Define el contenido de sonido |
| <video> | Define un vídeo o una película |
| <source> | Define los recursos de medios múltiples para <video> y <audio> |
| <embed> | Define un contenedor para una aplicación externa o de contenido interactivo (un plug-in) |
| <track> | Define las pistas de texto para <video> y <audio> |
El nuevo elemento <canvas>
| Etiqueta | Descripción |
|---|---|
| <canvas> | Se utiliza para dibujar gráficos sobre la marcha a través de secuencias de comandos (normalmente JavaScript) |
Nuevos elementos de formulario
| Etiqueta | Descripción |
|---|---|
| <datalist> | Especifica una lista de opciones predefinidas para los controles de entrada |
| <keygen> | Define un campo generador de par de claves (para las formas) |
| <output> | Define el resultado de un cálculo |
Elementos eliminados de la version anterior de HTML
Los siguientes elementos o etiquetas de la version HTML4 fueron eliminados y su uso no sería correcto para la nueva versión de HTML5
- <acronym>
- <applet>
- <basefont>
- <big>
- <center>
- <dir>
- <font>
- <frame>
- <frameset>
- <NOFRAMES>
- <strike>
- <tt>